Comment faire pour supprimer la ligne vide persistante au sommet de l'ui-grille AngularJS?

Question

J'ai un Angulaire ui-grille avec les options de grille suivantes:

 $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(); 
        }); 
       }); 
      } 
     }; 

Une chose je remarque est que je reçois une ligne vide en haut de la grille avec Edit et Supprimer. Je suppose que c'est parce qu'ils sont dans le modèle de cellule. Y at-il un moyen de ne pas avoir la ligne vide sur le dessus de la grille? Y a-t-il peut-être une propriété dans les options de grille que je ne connais pas?

Merci

Answer 1

Pouvez-vous fournir un peu plus de code/données/HTML/JS? Tout semble bien ici ...

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>

Heureux de vous aider.