UI Grid add editable row

19,137

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' });
    };


 }]);

As a Full stack web developer with more than 9 years of experience, I have been developing and maintaining various web/mobile based application. A team-builder person and always try to explore new things to keep myself going. I believe in Quality, rather than quantity, which always helps to give my best towards any problem. In terms of technologies, have experience in various technologies including: • Front end(HTML, HTML5, CSS, CSS3, Javascript, JQuery, AngularJS, Angular, React, Vue, StencilJS) • Server + Database(NodeJS, PHP, Mongo, ASP.NET Core, MySql) • Mobile(Ionic, React Native, Flutter) • Other(Functional Programming, Redux, Webpack, TypeScript, ES6, GraphQL, Augmented Reality, Unity and more...) If you feel I'm the right sort of candidate for your organization, feel free to reach me via LinkedIn, email ([email protected]), or phone (918055750232/971509831764).

Updated on June 11, 2022

Comments

Rohan Kangale about 2 years
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.
Rohan Kangale over 8 years

The issue is that i wants editable fields to get added, not simply a read only row.
Rohan Kangale over 8 years

I wanted an editable row to be added. It simply adds a row, which is not editable.
Ramesh Rajendran over 8 years

@rohankangale . Yeah, this is now working for you. Don't forget to upvote
may lee over 8 years

enableCellEdit: true in $scope.gridOptions.columnDefs
Rohan Kangale over 8 years

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.
Rohan Kangale over 8 years

As i mentioned, i wanted only the newly added row to be editable, not the entire grid column fields.