CODEWITHSUNDEEP
angularjsangular-ui-grid
Rohan Kangale
Rohan Kangale

Reputation: 971

UI Grid add editable row

I wanted to add a new row into my existing grid. Also, the row which is getting pushed should be editable.

I tired below code and the row is getting added, But I wanted editable fields to be added

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

Can someone help me for the same.

Upvotes: 6

Views: 19581

Answers (3)

ronaldino
ronaldino

Reputation: 101

 $scope.gridOpts.data.push({
        "firstName": "New " + n,
        "lastName": "Person " + n,
        "company": "abc",
        "employed": true,
        "gender": "male",
    enableCellEdit: true,
      });

add enableCellEdit: true, this to enable the

Upvotes: 0

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38663

Try this sample

Update

This is full 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

Upvotes: 5

may lee
may lee

Reputation: 3

in 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>

Upvotes: 0

Related Questions