How to update the respective row in angular ui grid

Question

Hi i am trying to avoid name duplication's in angular ui grid.

$scope.gridOptions.columnDefs = [
    { name: 'id', width: '25%' },
    { field: 'name', 
      displayName: 'Name', 
      width: '25%',
      height:'auto',
      'cellTemplate':'<div><input type="text" ng-class="{error:grid.appScope.hasError(row.entity)}" ng-change="grid.appScope.objectHasChanged(row.entity)"  ng-input="row.entity.name" ng-model="row.entity.name" /><div class="errorspan" ng-show="grid.appScope.hasError(row.entity)" >Error in field</div></div>'
    },
    { name: 'gender', displayName: 'Gender', editableCellTemplate: 'ui-grid/dropdownEditor', width: '20%',
      cellFilter: 'mapGender', editDropdownValueLabel: 'gender', editDropdownOptionsArray: 
      [
        { id: 1, gender: 'Male' },
        { id: 2, gender: 'Female' }
      ] 
    },
    {
        field: 'status',
        cellTemplate: '<div ng-if="row.entity.status == 0">Active</div><div ng-if="row.entity.status == 1">InActive</div>'
    }
  ];

Here is my plunker: http://plnkr.co/edit/PlUfwRGEezYQVMpXmiIr?p=preview

Problem is with its opening all the other rows as well.

What am i doing wrong? Is there any way to update only to the particular row?

Answer 1

You can use ui-grid-validate (see http://ui-grid.info/docs/#/tutorial/322_validation).

<div ui-grid="gridOptions" ui-grid-edit ui-grid-cellNav ui-grid-validate class="grid"></div>

And in JS:

  uiGridValidateService.setValidator('alreadyIn',
    function(argument) {
      return function(newValue, oldValue, rowEntity, colDef) {
        if (!newValue) {
          return true; // We should not test for existence here
        } else {
          angular.forEach(argument, function(obj, key) {
            if (obj.name === newValue) return true;
          });
          return false;
        }
      };
    },
    function(argument) {
      return "You can't insert duplicate";
    }
  );

Here is your plunker updated: http://plnkr.co/edit/hCVa6hbdlIH2RW4JnYSg

Answer 2

Angular UI-Grid row entity update steps:
1. Grid column def.

columnDefs : [
                {
    field : 'email',
                cellTemplate : '<a href="#" 
    ng-click="grid.appScope.update(row)">&nbsp{{COL_FIELD}}&nbsp;</a>'
    }

2. Declare a variable within $scope in controller i.e

   
       var selectedRow;
       $scope.update = function(myRow) {
       $scope.selectedRow = myRow;
       $scope.objCopy = angular.copy($scope.selectedRow.entity);
       //testing or update from a modal form or get the server copy
       [email protected];
       $scope.selectedRow.entity  = angular.copy($scope.objCopy);
       }
   

Refer methods and parameters: http://ui-grid.info/docs/#!/api/ui.grid.class:GridRow

Answer 3

Just check with the changes @Mithun with a slight modification with your code :

 $scope.hasError = function(entity){  
  var changed = entity.name;
 // console.log('changed => '+changed);
 var count = 0;
 console.log($scope.gridOptions.data)
   for (var key in $scope.gridOptions.data)
   {
     console.log($scope.gridOptions.data[key]);

     if ($scope.gridOptions.data[key].name == changed) {
       count++;
     }
   }

   if(count>1){
      return true;
   }
    return false;
 };

Plunker link: http://plnkr.co/edit/Lj7vUXR9k1nuOcqvW8u9?p=preview.

Hope this satisfies your requirement