Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 318
Rohan Kangale Avatar asked Sep 28 '15 08:09

Rohan Kangale


1 Answers

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

like image 117
Ramesh Rajendran Avatar answered Oct 20 '22 09:10

Ramesh Rajendran