Geek Answers Handbook

UI Grid Add Editable Series

I wanted to add a new row to an existing grid. In addition, the line that is clicked must be editable.

I'm tired of the code below and the line is added, but I need to add editable fields.

$scope.addNewItem=function() { $scope.data.push( { name: 'Test add ' }); };

Can someone help me for the same.

+6
source share
2 answers

Try this sample

Update

This is the complete source code.

 <!doctype html> <html ng-app="app"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/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-unstable.js"></script> <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css"> </head> <body> <div ng-controller="MainCtrl"> <div ui-grid="{ data: data, columnDefs: columnDefs,enableRowSelection: true, enableSelectAll: true, enableFiltering: true, }" class="grid" ui-grid-selection ui-grid-edit ui-grid-cellnav></div> <button ng-click="addNewItem()" > ADD item</button> <button ng-click="insertNewItem()" > Insert item</button> </div> <script src="app.js"></script> </body> </html>

controller and module code

 var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.edit','ui.grid.cellNav']); app.controller('MainCtrl', ['$scope', function ($scope) { $scope.data = [ { name: 'Bob', title: 'CEO' }, { name: 'Frank', title: 'Lowly Developer' } ]; $scope.columnDefs = [ {name: 'name', cellEditableCondition:true}, {name: 'title', cellEditableCondition:true} ]; $scope.addNewItem=function() { $scope.data.push( { name: 'Test add ', title: 'Test add' }); }; $scope.insertNewItem=function() { $scope.data.splice(1, 0, { name: 'Test insert ', title: 'Test insert' }); }; }]);

Updated demo in plunkr

+4
source

in the controller

 var app = angular.module('app', ['ngTouch', 'ui.grid']); app.controller('MainCtrl', ['$scope', function ($scope) { $scope.addData = function() { var n = $scope.gridOpts.data.length + 1; $scope.gridOpts.data.push({ "firstName": "New " + n, "lastName": "Person " + n, "company": "abc", "employed": true, "gender": "male" }); }; var columnDefs1 = [ { name: 'firstName' }, { name: 'lastName' }, { name: 'company' }, { name: 'gender' } ]; var data1 = [ { "firstName": "Cox", "lastName": "Carney", "company": "Enormo", "gender": "male" }, { "firstName": "Lorraine", "lastName": "Wise", "company": "Comveyer", "gender": "female" }, { "firstName": "Nancy", "lastName": "Waters", "company": "Fuelton", "gender": "female" }, { "firstName": "Misty", "lastName": "Oneill", "company": "Letpro", "gender": "female" } ]; $scope.gridOpts = { columnDefs: columnDefs1, data: data1 }; }]);

in html

 <body> <div ng-controller="MainCtrl"> <button type="button" id="addData" class="btn btn-success" ng-click="addData()">Add Data</button> <div id="grid1" ui-grid="gridOpts" class="grid"></div> </div>

0
source

More articles:


All Articles