CODEWITHSUNDEEP
angular-ui-grid
Asarudeen A
Asarudeen A

Reputation: 59

Bring Edit with focus on a row newly added by clicking "Add Row" button in ui-grid of Angularjs

While clicking add row button, it should add a new row in ui-grid and need to bring edit focus for all the column of the particular newly added row.

Preview in Plunker

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

    <div ng-controller="MainCtrl">
      <div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-edit ui-grid-cellnav></div>
      <br/>
      <br/>
      <button class="btn btn-default" ng-click="addUser()">Add row</button>
    </div>

    <script src="app.js"></script>
  </body>
</html>

Upvotes: 0

Views: 1304

Answers (1)

S. Baggy
S. Baggy

Reputation: 958

Before your addUser() function add this

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

Unfortunately (due to a ui-grid limitation I cannot work around), you need to create an empty row in your initial data collection.

{
    "firstName": "Nancy",
    "lastName": "Waters",
    "company": "Fuelton",
    "employed": false
},
{
    "firstName": null,
    "lastName": null,
    "company": null,
    "employed": null
}

Then push() instead of unshift() to the second last row...

$scope.gridOptions.data.push(_model);
$scope.gridApi.cellNav.scrollToFocus($scope.gridOptions.data[$scope.gridOptions.data.length - 2], $scope.gridOptions.columnDefs[0]);

This works in your plunker, but you will need to handle (ignore) the empty row in your server, depending on how you are saving or processing the data in the grid.

Upvotes: 0

Related Questions