how to edit column in value in angular js?

Question

I am using UI-grid in my example .I saw the documentation from here of edit row . http://ui-grid.info/docs/#/tutorial/205_row_editable In given example user able to edit the columns present in row.I also make same example also include modules but not able to edit my columns ..what is procedure to edit the columns ?

here is my code http://plnkr.co/edit/zypDrZeJUx9ZoTHNnMxc?p=preview

already added the modules

angular.module('app',['ngTouch', 'ui.grid', 'ui.grid.selection' ,'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.cellNav'])

here is my JS file

$scope.gridOptions = {
        //filter demo
        // enableFiltering: true,
        // showHeader: false, // show header check
            enableRowSelection: true,
            multiSelect:false,
            //show checkbox front of each row or not
            enableRowHeaderSelection: false,
            onRegisterApi : function(gridApi){
      //set gridApi on scope
      $scope.gridApi = gridApi;
      gridApi.selection.on.rowSelectionChanged($scope,function(row){
        var msg = 'row selected ' + row.entity.age;
        console.log(row);
      });
            },

             enableFiltering: true,


     columnDefs: [
         {
                 field: 'gender', 
                 displayName:'Gender',
                 filter: { 
                     type: uiGridConstants.filter.SELECT,
                     selectOptions: [ 
                         { value: 'm', label: 'male' },
                         { value: 'F', label: 'female' },
                         { value: 'N', label: 'mdd' }

                     ]
                 },
             },



       {field: 'name', displayName:'First'},
       {field: 'lastname', displayName:'Second',enableSorting: false}
       ]
   }

RiesvGeffen · Accepted Answer · 2016-01-05 15:08:34Z

1

Take a look at the demo, I hope this is what you wanted.

It's not exactly the same as yours anymore but you can still edit the code.

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.selection']);


app.controller('MainCtrl', ['$scope', '$http', '$q', '$interval', 'uiGridConstants',
  function($scope, $http, $q, $interval, uiGridConstants) {
    $scope.data = [{
      name: 'abc',
      lastname: 'hrt',
      gender: 'm',
      age: 28

    }, {
      name: 'pqr',
      lastname: 'oiu',
      gender: 'F',
      age: 8

    }, {
      name: 'lqm',
      lastname: 'ytu',
      gender: 'N',
      age: 11

    }];

    $scope.gridOptions = {
      enableFiltering: true,
      enableRowSelection: true,
      multiSelect: false,
      enableRowHeaderSelection: false
    };

    $scope.gridOptions.columnDefs = [{
      name: 'gender',
      displayName: 'Gender',
      filter: {
        type: uiGridConstants.filter.SELECT,
        selectOptions: [{
            value: 'm',
            label: 'male'
          }, {
            value: 'F',
            label: 'female'
          }, {
            value: 'N',
            label: 'mdd'
          }

        ]
      }
    }, {
      name: 'name',
      displayName: 'First'
    }, {
      name: 'lastname',
      displayName: 'Second'
    }];

    $scope.saveRow = function(rowEntity) {
      // create a fake promise - normally you'd use the promise returned by $http or $resource
      var promise = $q.defer();
      $scope.gridApi.rowEdit.setSavePromise(rowEntity, promise.promise);

      promise.resolve();
    };

    $scope.gridOptions.onRegisterApi = function(gridApi) {
      //set gridApi on scope
      $scope.gridApi = gridApi;
      gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);

      gridApi.selection.on.rowSelectionChanged($scope, function(row) {
        var msg = 'row selected ' + row.entity.age;
        console.log(row);
      });
    };

    $scope.gridOptions.data = $scope.data;
  }
]);

<!doctype html>
<html ng-app="app">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/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.js"></script>
  <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
  <link rel="stylesheet" href="main.css" type="text/css">
</head>

<body>

  <div ng-controller="MainCtrl">
    <div ui-grid="gridOptions" ui-grid-edit ui-grid-row-edit ui-grid-selection class="grid"></div>
  </div>


  <script src="app.js"></script>
</body>

</html>

For any further questions you're always welcome. Here is a Plunker.

edited Jan 5, 2016 at 15:08

answered Jan 5, 2016 at 14:07

RiesvGeffen

1,5892 gold badges12 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user5711656 Over a year ago

there is code of row click in my code ..can we add that code ? mean can we add row click event..or we can't add click event while using editing

user5711656 Over a year ago

I am on chat..please type message

user5711656 Over a year ago

I am not able to write the text in that chat room may be less reputation

user5711656 Over a year ago

where i am here please check on fiddle as well as on previous chat..please check message

Collectives™ on Stack Overflow

how to edit column in value in angular js?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related