angular ui-grid rowHover Delete button

Question

I am trying to solve this issue for a long time, but couldn't succeed so far. I have a ui-grid and on row hover I would like to display a Delete button and on clicking the button the particular row should be deleted from the grid.

I followed these examples in stackoverflow or in Internet ingeneral, but none of them could solve the issue -

Angular JS UI-Grid Delete Row

http://jsfiddle.net/3ryLqa9e/4/

Is there a way to display button in the angular ui-grid on mouseover on that particular row?

Our ui-grid is dynamic where the column names are not known and are fetched by REST query.

I tried the following code -

 $scope.endPointsGrid = {
   //Other parameters ....
   //NO COLUMNDEFS since the columns are dynamic
   //This will just display the Delete button in each row, how to change it to row hover Delete button
   rowTemplate: '<button class="btn primary" ng-click="grid.appScope.deleteRow(row)">Delete</button>'
 }

 $scope.deleteRow = function(row) {
    var index = $scope.endPointsGrid.data.indexOf(row.entity);
    $scope.endPointsGrid.data.splice(index, 1);
 };

After pressing the button, I am getting the following error -

TypeError: Cannot read property 'indexOf' of undefined

Can you please suggest me the correct way?

Thanks