Show/Hide/Disable A 'Remove' Button On A NG-Grid - angularjs

I have an angularjs application which has a data-ng-grid. This table automatically displays 1 row by default and the last column displays a 'Remove' button but as this table has to have 1 or more entries in it I want to remove/disable this button when only one row is present in it.
I have tried adding ng-if="propertyIncomeGrid.count > 1" but when I click my add button it doesn't display on any row.
Please note that the user can delete any row so the button needs to be displayed as soon as the table row are > 1 and removed/disabled when <= 1.
Code
$scope.propertyIncomeGrid = {
data: 'propertyIncomeData',
enableColumnReordering: false,
rowHeight: 40,
multiSelect: false,
showColumnMenu: false,
showFooter: false,
enableColumnResize: true,
filterOptions: $scope.filterOptions,
selectedItems: $scope.mySelections,
enablePaging: false,
plugins: [gridLayoutPlugin],
columnDefs:
[
{ field: 'PropertyTransactionType', displayName: 'Income type', width: '18%', enableCellEdit: false, cellTemplate: incomeDropdownTemplate },
{ field: 'leaseId', displayName: 'Property ID and lease name', width: '30%', enableCellEdit: false, cellTemplate: leaseDropdownTemplate },
{ field: 'propertyId', displayName: 'propertyId', width: '0', editableCellTemplate: '' },
{ field: 'netAmount', displayName: 'Net (£)', width: '14%', cellTemplate: AmountCellTemplate },
{ field: 'vatAmount', displayName: 'VAT (£)', width: '14%', cellTemplate: AmountCellTemplate },
{ field: 'GROSSAmount', displayName: 'Gross (£)', width: '14%', cellTemplate: AmountCellTemplate },
{
field: 'removeBtn', displayName: 'Actions',
enableCellEdit: false,
cellTemplate: '<button class="btn btn-warning ng-if="propertyIncomeGrid.count > 1" ng-click="propertyIncomeRemoveRow(row.entity)" style="margin-top: 3px; margin-right: 0px; margin-left: 0px;">Remove</button>',
width: '10%'
},
]
};
I have tried debugging and it only hits when my modal loads and comes back as undefined.

Added the below to my button and works like magic:
ng-disabled="propertyIncomeData != undefined && propertyIncomeData.length < 2"
Full button code
cellTemplate: '<button class="btn btn-warning" ng-disabled="propertyIncomeData != undefined && propertyIncomeData.length < 2" ng-click="propertyIncomeRemoveRow(row.entity)" style="margin-top: 3px; margin-right: 0px; margin-left: 0px;">Remove</button>',

Related

Adding duplicate rows in ui-grid, typing on one field reflecting on all other rows,

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

Read the sum value from the column footer in UI - Grid?

I'm currently trying to read my column footer to make sure that the total sum from the aggregate is exactly 100. However I can not find a way to get that value from the grid functions. Maybe I missed a function in the docs. Is there a way to accomplish this or will I have to manually loop through my grid and sum the values?
You can use aggregates on the column footer to automatically show the sum of all the values in the column.
you can have your grid config like below
$scope.gridOptions = {
showGridFooter: true,
showColumnFooter: true,
enableFiltering: true,
columnDefs: [
{ field: 'name', width: '13%' },
{ field: 'address.street',aggregationType: uiGridConstants.aggregationTypes.sum, width: '13%' },
{ field: 'age', aggregationType: uiGridConstants.aggregationTypes.avg, aggregationHideLabel: true, width: '13%' },
{ name: 'ageMin', field: 'age', aggregationType: uiGridConstants.aggregationTypes.min, width: '13%', displayName: 'Age for min' },
{ name: 'ageMax', field: 'age', aggregationType: uiGridConstants.aggregationTypes.max, width: '13%', displayName: 'Age for max' },
{ name: 'customCellTemplate', field: 'age', width: '14%', footerCellTemplate: '<div class="ui-grid-cell-contents" style="background-color: Red;color: White">custom template</div>' },
{ name: 'registered', field: 'registered', width: '20%', cellFilter: 'date', footerCellFilter: 'date', aggregationType: uiGridConstants.aggregationTypes.max }
],
data: data,
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
}
};
http://plnkr.co/edit/nv1eJAIyD5xNDn8XI6L9?p=preview
To get the value from the footer, provided you know the column index and have a reference to the gridApi.
$scope.getFooterValue = function()
{
console.log($scope.gridApi);
alert($scope.gridApi.grid.columns[2].getAggregationValue());
}

ng-grid wrap-text rows with vertical scrolling

I have a ng-grid that I am trying create a wrap-text column for a column that contains multiple lines of comment text. I have been trying everything today that I can find on the internet and still can't find a solution. I want to show you my code and if someone can tell me a better way of doing this that would be a great help.
var vm = this;
$scope.gridOptions = {
data: 'myData',
enablePaging: true,
pagingOptions: $scope.GridPagingOptions,
sortInfo: {
fields: [],
columns: [],
directions: []
},
useExternalSorting: false,
showFooter: false,
columnDefs: [{
field: 'RequestNumber',
width: 90,
displayName: 'RequestID'
}, {
field: 'ActionByName',
width: 160,
displayName: 'Action }, { field: '
ActionDate ', width: 90, displayName: Action Date',
cellFitlter: "date:'yyyy-MM-dd'"
}, {
field: 'Comments',
width: 125,
displayName: 'Comments'
}, {
field: 'ApproverComments',
displayName: 'Approver Comments',
rowHeight: 25,
width: 215,
cellClass: 'wrap-text',
cellTemplate: '<label id="approverC" name="approverC" title="{{ row.getProperty(col.field)}}">{{ row.getProperty(col.field)}}</label>'
}]
};
.gridStyle4 {
border: 1px solid #dfdfdf;
overflow-y: scroll;
}
<div style="margin-top:100px;">
<hr style="height:1px; background-color: silver; border:0px; margin-top:0px; margin-bottom:10px;" />
<div class="gridStyle4" ng-grid="gridOptions" />
</div>

How to add confirm box for ui-grid check box?

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;
}
};

Angularjs ng-class with ng-grid / swapping css style

I have this very simple angular app using ng-grid. I for some reason don't know how to apply style based on data. I need to be able to display different status image based on data status Code below:
controller:
$scope.myData2 = [
{service: "aaa", status: "ok"},
{service: "ccc", status: "warning"}];
$scope.gridOptions2 = {
data: 'myData2',
headerRowHeight:0,
rowHeight: 39,
enableRowSelection: false,
enableHighlighting:true,
columnDefs: [
{field: 'service', enableCellEdit: true},
{field:'status', cellTemplate : 'stateTemplate.html'}]
};
directive:
angular.module('myApp')
.directive("statusIcon", function() {
return {
restrict: 'E',
template: "<div ng-class=status-{{row.getProperty('status')}}></div>"
};
});
template:
<status-icon></status-icon>
css:
.status-ok{
width: 24px;
height: 24px;
background: url("../images/status_ok.png") no-repeat;
}
.status-warning{
width: 24px;
height: 24px;
background: url("../images/status_ok.png") no-repeat;
}
when I render the page this is the output:
<status-icon class="ng-scope"><div ng-class="status-ok"></div></status-icon>
I'm missing a classic class="status-ok"
What am I doing wrong?
PLUNKR http://plnkr.co/edit/4xTC4pKIR0AnzD89iIp2?p=preview
have a look at cell templating article here.
columnDefs: [{ field: 'firstName', displayName: 'First Name', width: 90, cellTemplate: '<div>{{row.entity[col.field]}}</div>' },
{ field: 'lastName', displayName: 'Last Name', width: 80 },
{ field: 'age', cellClass: 'ageCell', headerClass: 'ageHeader' } ]
you can define cellClass or headerClass or completely different cellTemplate
EDIT
below is example on how to use ng-class with cell template
<div ng-class="row.entity[col.field] == 'success' ? 'successClass' : 'errorClass'">{{row.entity[col.field]}}</div>
EDIT
working plunker
you dont need ng-class you just need class

Resources