CODEWITHSUNDEEP
angularjsangular-ui-grid
user630209
user630209

Reputation: 1207

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

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?

Upvotes: 0

Views: 1953

Answers (1)

Ian A
Ian A

Reputation: 6128

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):

enter image description here

Please see this Plunkr for an example.

Upvotes: 3

Related Questions