Adding duplicate rows in ui-grid, typing on one field reflecting on all other rows,

Question

created a UI grid with the following fields.

vm.gridRadioTest.columnDefs = [{
       name: 'testName',
       displayName: 'Test Name',
       enableCellEdit: false,
       enableColumnMenu: false,
       enableSorting: true,
       sort: {
        direction: uiGridConstants.ASC
       }
      }, {
       name: 'remarks',
       displayName: 'Remarks to Lab',
       enableCellEdit: true,
       enableColumnMenu: false
      }, {
       name: 'xrayNo',
       displayName: 'X-ray No',
       enableCellEdit: true,
       enableColumnMenu: false
      }, {
       name: 'testStatus.status',
       displayName: 'Status',
       enableCellEdit: false,
       enableColumnMenu: false,
       //cellTemplate: '<a style="cursor: pointer;color: black" class="ui-grid-cell-contents" ng-if="row.entity.resultStatus != null" ng-click="grid.appScope.navigateToPage(row)"><span class=\"glyphicon glyphicon glyphicon-folder-open\" >Report</span></a>'
      }, {
       name: 'reportStatus',
       displayName: 'Report Status',
       enableCellEdit: false,
       enableColumnMenu: false,
       //cellTemplate: '<a style="cursor: pointer;color: black" class="ui-grid-cell-contents" ng-if="row.entity.resultStatus != null" ng-click="grid.appScope.navigateToPage(row)"><span class=\"glyphicon glyphicon glyphicon-folder-open\" >Report</span></a>'
      },{
       name: 'xrayReferral',
       displayName: 'X-Ray Referral',
       nableCellEdit : true,
       editableCellTemplate: 'ui-grid/dropdownEditor',
       cellFilter: 'mapLabSpecimen:this',
       editDropdownIdLabel: 'estCode',
       editDropdownValueLabel: 'estName',
       editDropdownOptionsArray: vm.instituteList,
       width: '30%'
     //  enableColumnMenu: false,
      // cellEditableCondition:false
        //cellTemplate: '<div class="ui-grid-cell-contents" ng-if="row.entity.resultStatus == \'\'" ><span class=\"glyphicon glyphicon-ok-circle\" style=\"color: green\";>Normal</span></div><div class="ui-grid-cell-contents" ng-if="row.entity.resultStatus == \'Abnormal\' "><span class=\"glyphicon glyphicon-remove-circle\" style=\"color: Red\";>Abnormal</span></div>'
      },{
       name: 'add',
       displayName: '',
       enableCellEdit: false,
       enableColumnMenu: false,
       width: '3%',
       cellTemplate: '<div class="ui-grid-cell-contents" ><span class=\"glyphicon glyphicon-plus  btn-primary-joli\" ng-click="grid.appScope.reOrderRadioTest()"></span></div>'
      }];

Pushing new record in the grid on each add button click

 $scope.reOrderRadioTest = function(){
      vm.gridRadioTest.data.push(radioTestList);
  }

radioTestList is

{"code":null,"message":"Total 1 records found","result":{"testId":4,"testName":"X-RAY","testNameAr":null,"testType":"R","componentTestsYn":null,"testUnitMast":{"id":1089,"ucumCode":"pmol/umol","ucumDesc":"PicoMolesPerMicroMole [Substance Ratio Or Substance Fraction Units]","ucumSynonym":"pmol/umol","mohName":"pmol/umol","activeYn":null},"labTestResultRange":{"testid":4,"description":"DESCRIPTION ","sex":"M","fromAge":0,"fromAgeFactor":"D","toAge":15,"toAgeFactor":"D","low":30,"high":50,"intermediateValue":40,"criticalLow":10,"criticalHigh":80,"printDescription":null,"ruleId":null,"createdBy":null,"createdDt":null,"lastModifiedBy":null,"lastModifiedDt":null,"rangeId":2,"activeYn":"Y","alertLowRange":null,"alertHighRange":null},"refOutYn":null,"doneHereYn":null,"mohTestId":null,"activeYn":"Y"}}

Here all on typing a value one grid field is appearing in all other fields. Here i typed ff in one field its reflected in all other rows.

I can see internally it using hashkey, How can I modify that

Answer 1

I have found the solution for it:

In function to add row, add the initialization of radioTestList variable.

$scope.reOrderRadioTest = function(){
  var radioTestList= {"remarks":'',"testName":''};
  vm.gridRadioTest.data.push(radioTestList);
}

Working Plunker is here: http://plnkr.co/edit/Vnn4K5DcCdiercc22Vry?p=preview