Related
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;
});
}
created a UI grid with the following fields.
vm.gridRadioTest.columnDefs = [{
name: 'testName',
displayName: 'Test Name',
enableCellEdit: false,
enableColumnMenu: false,
enableSorting: true,
sort: {
direction: uiGridConstants.ASC
}
}, {
name: 'remarks',
displayName: 'Remarks to Lab',
enableCellEdit: true,
enableColumnMenu: false
}, {
name: 'xrayNo',
displayName: 'X-ray No',
enableCellEdit: true,
enableColumnMenu: false
}, {
name: 'testStatus.status',
displayName: 'Status',
enableCellEdit: false,
enableColumnMenu: false,
//cellTemplate: '<a style="cursor: pointer;color: black" class="ui-grid-cell-contents" ng-if="row.entity.resultStatus != null" ng-click="grid.appScope.navigateToPage(row)"><span class=\"glyphicon glyphicon glyphicon-folder-open\" >Report</span></a>'
}, {
name: 'reportStatus',
displayName: 'Report Status',
enableCellEdit: false,
enableColumnMenu: false,
//cellTemplate: '<a style="cursor: pointer;color: black" class="ui-grid-cell-contents" ng-if="row.entity.resultStatus != null" ng-click="grid.appScope.navigateToPage(row)"><span class=\"glyphicon glyphicon glyphicon-folder-open\" >Report</span></a>'
},{
name: 'xrayReferral',
displayName: 'X-Ray Referral',
nableCellEdit : true,
editableCellTemplate: 'ui-grid/dropdownEditor',
cellFilter: 'mapLabSpecimen:this',
editDropdownIdLabel: 'estCode',
editDropdownValueLabel: 'estName',
editDropdownOptionsArray: vm.instituteList,
width: '30%'
// enableColumnMenu: false,
// cellEditableCondition:false
//cellTemplate: '<div class="ui-grid-cell-contents" ng-if="row.entity.resultStatus == \'\'" ><span class=\"glyphicon glyphicon-ok-circle\" style=\"color: green\";>Normal</span></div><div class="ui-grid-cell-contents" ng-if="row.entity.resultStatus == \'Abnormal\' "><span class=\"glyphicon glyphicon-remove-circle\" style=\"color: Red\";>Abnormal</span></div>'
},{
name: 'add',
displayName: '',
enableCellEdit: false,
enableColumnMenu: false,
width: '3%',
cellTemplate: '<div class="ui-grid-cell-contents" ><span class=\"glyphicon glyphicon-plus btn-primary-joli\" ng-click="grid.appScope.reOrderRadioTest()"></span></div>'
}];
Pushing new record in the grid on each add button click
$scope.reOrderRadioTest = function(){
vm.gridRadioTest.data.push(radioTestList);
}
radioTestList is
{"code":null,"message":"Total 1 records found","result":{"testId":4,"testName":"X-RAY","testNameAr":null,"testType":"R","componentTestsYn":null,"testUnitMast":{"id":1089,"ucumCode":"pmol/umol","ucumDesc":"PicoMolesPerMicroMole [Substance Ratio Or Substance Fraction Units]","ucumSynonym":"pmol/umol","mohName":"pmol/umol","activeYn":null},"labTestResultRange":{"testid":4,"description":"DESCRIPTION ","sex":"M","fromAge":0,"fromAgeFactor":"D","toAge":15,"toAgeFactor":"D","low":30,"high":50,"intermediateValue":40,"criticalLow":10,"criticalHigh":80,"printDescription":null,"ruleId":null,"createdBy":null,"createdDt":null,"lastModifiedBy":null,"lastModifiedDt":null,"rangeId":2,"activeYn":"Y","alertLowRange":null,"alertHighRange":null},"refOutYn":null,"doneHereYn":null,"mohTestId":null,"activeYn":"Y"}}
Here all on typing a value one grid field is appearing in all other fields.
Here i typed ff in one field its reflected in all other rows.
I can see internally it using hashkey, How can I modify that
I have found the solution for it:
In function to add row, add the initialization of radioTestList variable.
$scope.reOrderRadioTest = function(){
var radioTestList= {"remarks":'',"testName":''};
vm.gridRadioTest.data.push(radioTestList);
}
Working Plunker is here: http://plnkr.co/edit/Vnn4K5DcCdiercc22Vry?p=preview
How to add confirm box for ui-grid check box ?
The defaultYn value, tried to add a confirm message before making a server call.
vm.gridOptions1 = {
enableColumnResizing: true,
enableAutoResizing: false,
enableHorizontalScrollbar : 1,
enableRowSelection: true,
enableRowHeaderSelection: false,
appScopeProvider: vm.myAppScopeProvider,
// rowTemplate: "<div ng-dblclick=\"grid.appScope.openOtherPavacce(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\" ui-grid-cell></div>",
columnDefs: [
{field: 'jobVaccinationPK.screeningTypeMast.screeningType', displayName: 'Screening type',type: 'text',width: '27%', enableCellEdit: false},
{field: 'jobVaccinationPK.jobCategoryTypeMast.jobCategoryName', displayName: 'Job Category',width: '27%', enableCellEdit: false},
{field: 'jobVaccinationPK.vaccinationMast.vaccinationName', displayName: 'Vaccination', width: '27%', enableCellEdit: false},
{field: 'defaultYn', displayName: 'DefaultYn',width: '10%' , cellTemplate: '<input type="checkbox" ng-model="row.entity.defaultYn" ng-really-message="Are you sure ?" ng-really-click="grid.appScope.updateRow(row)" ng-true-value="\'Y\'" ng-false-value="\'N\'">'},
{
//field:'',
name: 'Action',
cellTemplate: '<button class="btn btn-primary-joli" ng-click="grid.appScope.deleteRow(row)">Delete</button>',width: '9%'
}
],
onRegisterApi: function(gridApi) {
vm.gridApi = gridApi;
var cellTemplate='<div style= \"height:100px \" class=\"ui-grid-row-header-cell ui-grid-expandable-buttons-cell\"><div class=\"ui-grid-cell-contents\"><i ng-class=\"{ \'glyphicon glyphicon-calendar \' : row.entity.visitMasts[0].orderses.length !== 0 }\" ng-click=\"grid.appScope.showPopup(row)\" style=\"color: rgb(212, 106, 64)\";></i></div></div>'; //
vm.gridApi.core.addRowHeaderColumn( { name: 'rowHeaderCol', displayName: '', width: 30, cellTemplate: cellTemplate , headerTooltip: 'Click icon to see details'} );
vm.gridOptions1.multiSelect = false;
vm.gridOptions1.modifierKeysToMultiSelect = false;
vm.gridOptions1.noUnselect = true;
}
};
I search for this error but not able to fix it.Am new to angular.Dont know exactly whats going wrong.
Html:
<div class="row gridContainer" ng-controller="tripsGridController">
<div ui-i18n="{{::selectedLanguageName}}">
<div ui-grid="gridOptionsTrips" ui-grid-selection ui-grid-resize-columns ui-grid-move-columns ></div>
</div>
</div>
Angular code:
$scope.gridOptionsTrips = {};
$scope.gridDataSourceTrips = [];
var ROW_HEIGHT = 30;
// to show data on Grid
$scope.gridOptionsTrips = {
enableRowSelection: true,
enableRowHeaderSelection: true,
enableSorting: true,
multiSelect: false,
rowHeight: ROW_HEIGHT,
virtualizationThreshold: 10,
fastWatch: false,
enableHorizontalScrollbar: uiGridConstants.scrollbars.NEVER,
data: 'gridDataSourceTrips',
appScopeProvider: $scope,
showColumnMenu: true,
enableSelectAll: false,
noUnselect: true,
enableCellSelection: true,
rowTemplate: '<div ng-click=\"grid.appScope.onTripsGridRowClick(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.uid\" class=\"ui-grid-cell\" ng-class=\"{ \'ui-grid-row-header-cell\': col.isRowHeader }\" ui-grid-cell></div>'
};
$scope.onTripsGridRowClick = function (row) {
$scope.gridApi.selection.selectRow(row.entity);
};
$scope.gridColDefsTrips = function () {
var idTemplate = '<div></div>';
var sTemplate = '<div></div>';
var speedTemplate = '<div></div>';
var directionTemplate = '<div></div>';
var timeTemplate = '<div></div>';
var kmCounterTemplate = '<div></div>';
var driverNameTemplate = '<div></div>';
return [
{ name: "CARDRIVER", displayName: "CARDRIVER", field: 'UserId', cellTemplate: idTemplate, enableColumnMenu: false, headerCellFilter: 'translate', width: 150, showInColumnFilter: true },
{ name: 'STARTEND', displayName: 'STARTEND', field: 'Departure.DateTime', cellTemplate: idTemplate, width: 70, enableColumnMenu: false, headerCellFilter: 'translate', showInColumnFilter: true },
{ name: 'STARTEND', displayName: 'STARTEND', field: 'Destination.DateTime',cellTemplate: idTemplate, enableColumnMenu: false, headerCellFilter: 'translate', width: 80, showInColumnFilter: true },
{ name: 'TRIPLENGTH', displayName: 'TRIPLENGTH', field: 'Distance', cellTemplate: idTemplate, enableColumnMenu: false, headerCellFilter: 'translate', width: 150, showInColumnFilter: true }
];
};
$scope.gridDataSourceTrips = tripsDetailsService.GetAllTripsByWeek('2014-01-10', '2014-01-14', 1, 20);
$scope.gridOptionsTrips.columnDefs = $scope.gridColDefsTrips();
I am having a grid with multiple columns and a header. There is also a textbox to search the data present in that column, the code that i am using is
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.selections,
enablePaging: true,
showGroupPanel: true,
jqueryUIDraggable: true,
plugins: [filterBarPlugin],
headerRowHeight: 60 ,// give room for filter bar
totalServerItems: 'totalServerItems',
pagingOptions: $scope.pagingOptions,
enableHighlighting: false,
selectWithCheckboxOnly: false,
showFooter: true,
showSelectionCheckbox: false,
};
$scope.selections = [];
var filterBarPlugin = {
init: function(scope, grid) {
filterBarPlugin.scope = scope;
filterBarPlugin.grid = grid;
$scope.$watch(function() {
var searchQuery = "";
angular.forEach(filterBarPlugin.scope.columns, function(col) {
if (col.visible && col.filterText) {
var filterText = col.filterText +'; ';
searchQuery += col.displayName + ": " + filterText;
}
});
return searchQuery;
}, function(searchQuery) {
filterBarPlugin.scope.$parent.filterText = searchQuery;
filterBarPlugin.grid.searchProvider.evalFilter();
});
},
scope: undefined,
grid: undefined,
};
$scope.myHeaderCellTemplate = '<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{cursor: col.cursor}" ng-class="{ ngSorted: !noSortVisible }">'+
'<div ng-click="col.sort($event)" ng-class="\'colt\' + col.index" class="ngHeaderText">{{col.displayName}}</div>'+
'<div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>'+
'<div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>'+
'<div class="ngSortPriority">{{col.sortPriority}}</div>'+
'</div>'+
'<input type="text" ng-click="stopClickProp($event)" placeholder="Filter..." ng-model="col.filterText" ng-style="{ \'width\' : col.width - 14 + \'px\' }" style="position: absolute; top: 30px; bottom: 30px; left: 0; bottom:0;"/>' +
'<div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>';
$scope.gridOptions.columnDefs = 'gridColumnDefs';
$scope.gridColumnDefs = [
{field: 'Actions', cellTemplate: 'Template.html'},
{
field: 'index',
displayName: 'Index',
headerCellTemplate: $scope.myHeaderCellTemplate
},
{
field: "S",
displayName:"Severity",
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text><img src="http://goo.gl/vxCnLC"></img></span></div>'
},
{field:'SA', displayName:'ServiceAffecting',
//cellTemplate:'<div><img ng-src="{{row.getProperty(\'"SA"\') | imagefilter}}"></img></div>'
cellTemplate:'<div><img ng-src="{{row.getProperty(\'SA\') | imagefilter}}"></img></div>'
}, {
field: "TR",
displayName:"Trigger Redundancy",
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text><img src="http://goo.gl/aFomAA"></img></span></div>'
,headerCellTemplate: $scope.myHeaderCellTemplate
}, {
field: "D",
displayName:"Description",
headerCellTemplate: $scope.myHeaderCellTemplate
},
{
field: "O",
displayName:"Object",
headerCellTemplate: $scope.myHeaderCellTemplate
},
{
field: "Dev",
displayName:"Device",
headerCellTemplate: $scope.myHeaderCellTemplate
},
{
field: "IP",
displayName:"IP Address",
headerCellTemplate: $scope.myHeaderCellTemplate
},
{
field: "Group",
displayName:"Group",
headerCellTemplate: $scope.myHeaderCellTemplate
},
{
field: "AT",
displayName:"Assert Time"
},
{
field: "AckT",
displayName:"Acknowlegded Time"
}
];
My filteration is not working properly ,please suggest what can be the reason for it or please suggest proper alterations.
Also it is disabled at the first instance,when I am using it first time,I am not able to get a cursor in the search textbox.Also i want this to work for numeric values too.
link:
http://plnkr.co/edit/5Z8QXhGjsB5rpCVDlfqs?p=preview
By default filter is not "Contains", may be "Startswith",
So, inject uiGridConstants
and add
filter:{condition:uiGridConstants.filter.CONTAINS}
to your columnDefs