UI Grid add editable row

Asked 28/9, 2015 at 8:53 Answered 7/3, 2019 at 6:42

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.

Trapshooting answered 28/9, 2015 at 8:53 Comment(1)

Did you find solution for your question? – Instable 11/1, 2017 at 5:50

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

Rubellite answered 28/9, 2015 at 9:4 Comment(3)

The issue is that i wants editable fields to get added, not simply a read only row. – Trapshooting 28/9, 2015 at 9:8

@rohankangale . Yeah, this is now working for you. Don't forget to upvote – Rubellite 28/9, 2015 at 9:25

As i mentioned, i wanted only the newly added row to be editable, not the entire grid column fields. – Trapshooting 28/9, 2015 at 9:56

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>

Revisionism answered 28/9, 2015 at 9:9 Comment(3)

I wanted an editable row to be added. It simply adds a row, which is not editable. – Trapshooting 28/9, 2015 at 9:19

enableCellEdit: true in $scope.gridOptions.columnDefs – Revisionism 28/9, 2015 at 9:37

enableCellEdit will set editable property for the entire column, which i don't want. As i mentioned, i wanted only the newly row going to be added to be editable. – Trapshooting 28/9, 2015 at 9:51

 $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

Sanmiguel answered 7/3, 2019 at 6:42 Comment(0)

Update

Updated Demo in plunkr

Recommended topics

Hot tags