How to remove persistent empty row at top of AngularJS ui-grid?

Question

I have a Angular ui-grid with the following grid options:

        $scope.gridOptions = {
            data: 'gridData',
            enableColumnMenus: false,
            enableRowSelection: false,
            enableFullRowSelection: false,
            enableSelectAll: false,
            enableRowHeaderSelection: false,
            multiSelect: false,
            noUnselect: false,
            columnDefs: [
                {
                    field: 'FirstName',
                    name: 'First Name',
                    width: '*'
                },
                {
                    field: 'LastName',
                    name: 'Last Name',
                    width: '*'
                },
                {
                    field: 'RoleCode',
                    name: 'Role',
                    width: '*'
                },
                {
                    field: 'Notes',
                    name: 'Notes',
                    width: '*'
                },
                {
                    name:' ',
                    enableFiltering: false,
                    enableSorting: false,
                    enableColumnMenu: false,
                    width: '*',
                    cellTemplate:'<div>' +
                    '<a><button class="btn btn-primary btn-xs l-margin" ng-click="grid.appScope.onEditClick(row.entity)">Edit</button></a>' +
                    '<a><button class="btn btn-danger btn-xs l-margin" ng-click="grid.appScope.onDeleteClick(row.entity)">Delete</button></a>' +
                    '</div>'
                }
            ],
            onRegisterApi: function(gridApi){
                $scope.$on('resize-grid',function() {
                    $timeout(function() {
                        gridApi.core.handleWindowResize();
                    });
                });
            }
        };

One thing I'm noticing is that I'm getting a blank row at the top of the grid with the Edit and Delete buttons. I guess this is because they are in the cell template. Is there any way to not have the blank row on the top of the grid? Is there perhaps a property in grid options that I'm not aware of?

Thanks

Does anyone know why an empty data row would appear on a ui-grid? — CurlyShuffle, Mar 03 '17 at 20:17

Tim Harker · Answer 1 · 2017-03-11T03:40:56.537

Can you provide some more code/data/HTML/JS? Everything looks good here...

var app = angular.module('app', ['ui.grid']);
app.controller('MainCtrl', ['$scope', function($scope) {
  $scope.gridOptions = {
    data: 'gridData',
    enableColumnMenus: false,
    enableRowSelection: false,
    enableFullRowSelection: false,
    enableSelectAll: false,
    enableRowHeaderSelection: false,
    multiSelect: false,
    noUnselect: false,
    columnDefs: [{
        field: 'FirstName',
        name: 'First Name',
        width: '*'
      },
      {
        field: 'LastName',
        name: 'Last Name',
        width: '*'
      },
      {
        field: 'RoleCode',
        name: 'Role',
        width: '*'
      },
      {
        field: 'Notes',
        name: 'Notes',
        width: '*'
      },
      {
        name: ' ',
        enableFiltering: false,
        enableSorting: false,
        enableColumnMenu: false,
        width: '*',
        cellTemplate: '<div>' +
          '<a><button class="btn btn-primary btn-xs l-margin" ng-click="grid.appScope.onEditClick(row.entity)">Edit</button></a>' +
          '<a><button class="btn btn-danger btn-xs l-margin" ng-click="grid.appScope.onDeleteClick(row.entity)">Delete</button></a>' +
          '</div>'
      }
    ],
    onRegisterApi: function(gridApi) {
      $scope.$on('resize-grid', function() {
        $timeout(function() {
          gridApi.core.handleWindowResize();
        });
      });
    },
    data: [{"FirstName": "Matt", "LastName": "W", "RoleCode": "Stack Overflow User", "Notes": "Everything looks good."},
           {"FirstName": "Tim", "LastName": "Harker", "RoleCode": "Stack Overflow User", "Notes": "Everything looks good, again."}]
  };
}]);

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" />
<div ng-app="app" ng-controller="MainCtrl">
  <div ui-grid="gridOptions"></div>
</div>

Happy to help.

How to remove persistent empty row at top of AngularJS ui-grid?

1 Answers1