Untitled

<!DOCTYPE html>
<html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>  
        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
        <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </body>
</html>

// Code goes here


var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.myData = [{name: "Moroni", age: 50, edit:false},
                     {name: "Tiancum", age: 43, edit:false},
                     {name: "Jacob", age: 27, edit:false},
                     {name: "Nephi", age: 29, edit:false},
                     {name: "Enos", age: 34, edit:false}];
    $scope.gridOptions = { 
        data: 'myData',
        enableRowSelection: false,
         rowTemplate: '<div ng-dblclick="onDblClickRow(row)" ng-style="{ \’cursor\’: row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}"><div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div><div ng-cell></div></div>',
        columnDefs: [
          { field: 'name', displayName: 'Name',
            cellTemplate: '<input ng-show="row.entity.edit" type="text" ng-model="row.entity.name"><div ng-show="!row.entity.edit">{{row.getProperty(col.field)}}</div></input>'
          }, 
          { field: 'age',displayName: 'Age',
            cellTemplate: '<input ng-show="row.entity.edit" type="text" ng-model="row.entity.age"><div ng-show="!row.entity.edit">{{row.getProperty(col.field)}}</div></input>'
          },
          {
            displayName: 'Edit',
            cellTemplate: '<div><button ng-click="editRow(row)">Edit</button></div>'
          },
          {
            displayName: 'Cancel',
            cellTemplate: '<div><button ng-click="editSave(row)">Save</button></div>'
          }
        ]
    };
    
    $scope.editRow = function(row) {
      row.entity.edit = true;
    }
    
    $scope.onDblClickRow= function(row) {
      alert(row)
    }
   
     $scope.editSave = function(row) {
      row.entity.edit = false;
      //Do your bussiness here
    }
   
    
});

/*style.css*/
.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 500px; 
    height: 300px
}