Managing add and remove button in ui-grid using cell template

Question

In grid the add button should have only in the last record,

This is the code used in cell template

 cellTemplate: '<button class="btn primary" ng-click="grid.appScope.deleteRow(row)">Delete</button>'+
    '<button class="btn primary" ng-click="grid.appScope.addRow(row)">Add</button>'

plunk here http://plnkr.co/edit/vP8K039cwMsVymCdRelT?p=preview

In plunk all rows have both the buttons, How can I remove the add button from all rows except from the last ?

How can I manage that using grid row length?

Answer 1

If you get hold of the gridApi as follows:

$scope.gridOptions.onRegisterApi = function(gridApi){
    //set gridApi on scope
    $scope.gridApi = gridApi;
}

Then modify the Add button in your cell template so it has the following:

ng-show="grid.appScope.isLast(row)"

and define an isLast function on the scope:

$scope.isLast = function(row) {
  return row.uid === $scope.gridApi.grid.renderContainers.body.visibleRowCache[$scope.gridApi.grid.renderContainers.body.visibleRowCache.length-1].uid;
}

This function compares the uid of the current row against the uid of the last rendered row, and returns true if it is the last row, or false otherwise. The ng-show renders the Add button based on the value returned by this function.

That will display the Add button only on the last row. This will also work as rows are added/removed (the Add button will remain on the last row):

Please see this Plunkr for an example.