AG-GRID & AngularJS - How to edit data externally

Question

I am working on a single page application using Agularjs, UI-Router and AG-GRID. I can't figure out how to update AG-GRID's data from an external form.

Let me explain, from the AG-GRID data table, I added button that would grab the row data and transfert it to my form page. The form page would then populate with the data correctly. Once in the form page if I try to edit the data and go back to my main page (where I have AG-GRID) I dont see any changes.

I tried doing the $scope.gridOptions.api.refreshCells(); This doesent seem to do anything nor does it generate any errors.

This is what my setup looks like so far:

Main_controller:

App.controller('Main_Controller', function ($scope, $http, $filter, $timeout, $mdDialog, $q, $resource, $interval, $mdSidenav, $state, Service) {

    var Buttons = function(params) {
        return '<md-button class="md-icon-button" aria-label="Edit" ng-click="Edit(data)"> <md-icon class="material-icons">mode_edit</md-icon> </md-button>'';
    }

    var columnDefs = [
    { cellRenderer: Buttons, width: 165 },
    { headerName: "Data1", field: "Data1"},
    { headerName: "Data2", field: "Data2"}, 
    ];

    $scope.gridOptions_incident = {
        columnDefs: columnDefs,
        domLayout: 'autoHeight',
        enableFilter: true,
        enableColResize: true,
        enableSorting: true,
        pagination: true,
        paginationPageSize:25,
        animateRows: true,
        headerHeight: headerHeight,
        rowHeight:rowHeight,
        angularCompileRows : true,  
        enableCellChangeFlash: true,
        debug: true,
        rowData: Service.get_data()
    };  

    $scope.Edit = function(data){
        Service.current_incident(data);
        $state.go('OPEN_ExternalForm');
    };  

});

Service:

GDI_App.factory('Service', function($http, $q, $timeout, $mdDialog, $resource, $window) {
    return{

        get_data: function(){
            var example_data = [
               { "Data1": "123123", "Data2": "15437"  },
               { "Data1": "432234", "Data2": "146"  },
               { "Data1": "45654", "Data2": "3534"  },
               { "Data1": "76587", "Data2": "78978"  },
               { "Data1": "2342", "Data2": "5345878"  },
               { "Data1": "178", "Data2": "34534"  },
               { "Data1": "173838", "Data2": "354534"  },
            ];
            return example_data             
        }
        current_incident: function(data){
          Current.Data = data;
          return Current.Data
        }

    }
});

Form Controller:

GDI_App.controller('Form_Controller', function ($scope, $http, $filter, $timeout, $mdDialog, $q, $resource, $interval, $mdSidenav, Service) {

    $scope.Current.Data = Service.current_incident();
    $scope.Submit = function(){

        $http({
            method: 'POST',
            url: REST_URL,
            processData: false,
            contentType: "application/json;odata=verbose",                 
            headers: HEADER_DATA,
            data: $scope.Current.Data
        });   

    }

});

Form HTML:

I have a very basic HTML form:

<div ng-controller="Form_Controller">
    Data1: <input ng-model="Current.Data.Data1">
    Data2: <input ng-model="Current.Data.Data2">
    <button ng-click="Submit()" type="button">Submit</button>
</div>

Im not quite sure what im missing. My end goal is to be able to edit the data from an external data and then have it synced up on the AG-Grid.

Anyone have an idea?

Answer 1

u can update cell data like this:

  var rowNode = $scope.gridOptions_incident.api.getRowNode(id);
  rowNode.setDataValue('Data2', 'newData');