Bring Edit with focus on a row newly added by clicking "Add Row" button in ui-grid of Angularjs -
while clicking add row button, should add new row in ui-grid , need bring edit focus column of particular newly added row.
<!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>
before adduser() function add this
$scope.gridoptions.onregisterapi = function (gridapi) { $scope.gridapi = gridapi; } unfortunately (due ui-grid limitation cannot work around), need create empty row in initial data collection.
{ "firstname": "nancy", "lastname": "waters", "company": "fuelton", "employed": false }, { "firstname": null, "lastname": null, "company": null, "employed": null } then push() instead of unshift() 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 plunker, need handle (ignore) empty row in server, depending on how saving or processing data in grid.
Comments
Post a Comment