Currently, I'm in the process of developing a single-page application that utilizes AngularJS, UI-Router, and AG-GRID. However, I've encountered an issue with updating AG-GRID's data from an external form.
Here is a breakdown of the problem: on the AG-GRID data table, I have implemented a button that extracts row data and transfers it to a separate form page. The form page successfully populates with the data. However, upon editing the data in the form and returning to the main page (where AG-GRID is located), the changes are not reflected.
I attempted using $scope.gridOptions.api.refreshCells(); but this command does not seem to work and does not produce any errors or results.
Thus far, this is how my setup is structured:
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> </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:
The basic HTML form includes:
<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>
I am puzzled by what might be causing this issue. My ultimate objective is to allow for data editing from an external source and ensuring synchronization with AG-Grid.
Does anyone have any insights or suggestions?