UI-grid: How to access MODEL_COL_FIELD from custom function?

Question

I need to call from external scope a function, which opens the $modal, and on closing the modal, returns the result.

<div class="ui-grid-cell-contents">
  <input ng-class="colt + col.uid"
         ng-model="MODEL_COL_FIELD" ng-click="grid.appScope.openModal()"/>
</div>

and the function

$scope.openModal = function () {
  var dialogScope = $scope.$new();
  dialogScope.result = '';

  var modalInstance = $modal.open({
     templateUrl: 'url here',
     scope: dialogScope,
     size: 'lg'
  });

modalInstance.result.then(function() {
   // here I need to assign dialogScope.result to ui-grid Cell variable (MODEL_COL_FIELD)
})

How can I update MODEL_COL_FIELD variable using my external scope function? It's probably available somewhere in grid.appScope

score 1 · Answer 1 · answered May 23 '16 at 11:14

If I understand correctly, you are just trying to pass that row data into a modal. I suggest using this method, which will give you access to the row object itself. This will allow any edits to the row in the modal to be passed to the parent grid.

Using this method, you would not be passing the result and updating the row, but instead updating the row from the modal itself because you are using a reference to the row object.

I have left dialogScope.result, but it will not be necessary to have for what you are doing here.

Template

<div class="ui-grid-cell-contents">
  <input ng-class="colt + col.uid"
         ng-model="MODEL_COL_FIELD" ng-click="grid.appScope.openModal(row)"/>
</div>

Function:

$scope.openModal = function (row) {
  var dialogScope = $scope.$new();
  dialogScope.result = '';
  dialogScope.rowEntity = row.entity;

  var modalInstance = $modal.open({
     templateUrl: 'url here',
     scope: dialogScope,
     size: 'lg'
  });

modalInstance.result.then(function() {
   // here I need to assign dialogScope.result to ui-grid Cell variable (MODEL_COL_FIELD)
})

UI-grid: How to access MODEL_COL_FIELD from custom function?

1 Answers1