Geek Answers Handbook

How to force automatically update ui-grid after adding row

I spent a lot of time to solve this problem and need some help. I am creating a grid on my page using Angular Ui-Grid, but cannot force it to update data after adding a new row. In my main controller, I have a "create event" function that calls a service and template for modal data to load data:

$scope.createEvent = function (eventTypeId) { var newEvent = null; var eventFields = null; var opts = { backdrop: 'static', backdropClick: true, dialogFade: false, keyboard: true, templateUrl: 'views/event.html', controller: 'EventEditCtrl', size: 'md', resolve: { params: function () { return {model: newEvent, fields: eventFields, caption: "Create event"}; } } }; eventService.getEventTemplate(0, eventTypeId) .then(function (data) { newEvent = data.model; newEvent.id = null; newEvent.occuredDate = new Date(newEvent.occuredDate); eventFields = data.fields; var uibModalInstance = $uibModal.open(opts); uibModalInstance.result.then(function (data) { $location.path("views/" + data.model.id); }, function () { } ); }, errorDetails) };

send an event and insert an event from the event controller.

  $scope.insertEvent = function (event) { $log.info('insert'); $log.info(event); eventService.insertEvent(event) .then(function (data) { $uibModalInstance.close(data); }); }; $scope.onSubmit = function (event) { console.log(event); if (event.id == null || event.id == 0) { $scope.insertEvent(event) } }

and finally my insert event service function looks like

  var insertEvent = function (event) { return $http({ method : 'POST', url : apiUrl, data : event }) .then(function success (result ) { console.log(result.data); cachedEvents = result.data; return result.data }, function error (response){ $log.error(" post has been failed ", response) }) };

So, the insert works fine, modally works fine, but the grid does not update, even if I try to return a promise or callback, it doesn’t help,

I tried to install the update after the modal was closed, the event was inserted or the submit button was pressed, but nothing helps

  $scope.gridApi.core.queueGridRefresh(); $scope.gridApi.core.refresh(); $scope.gridApi.grid.refreshCanvas(); $scope.gridApi.grid.refreshRows();

I also tried to set a notification if the grid was changed, but that didn't help either:

  onRegisterApi: function (gridApi) { $scope.gridApi = gridApi; gridApi.core.on.columnVisibilityChanged($scope, function (changedColumn) { $scope.columnChanged = {name: changedColumn.colDef.name, visible: changedColumn.colDef.visible}; }); //********** gridApi.selection.on.rowSelectionChanged($scope, function (row) { $scope.rowData = row.entity; $scope.id = $scope.rowData.id; $scope.rowKeys = Object.keys($scope.rowData); }); gridApi.core.notifyDataChange( uiGridConstants.dataChange.ALL) }

initialization of grid data

  var getData = (function () { $http.get(urlData) .success(function (data) { // Considering Angular UI-Grid $scope.gridOptions.data should be declared as is $scope.gridOptions.data = data; // $interval whilst we wait for the grid to digest the data we just gave it $interval(function () { $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]); }, 0, 1); }); }());

I appreciate if someone can help me find my mistake.

+5
source share
3 answers

Try this in your "next" function:

 $scope.gridOptions.data.push(result.data);
+2
source

Can you try to return a promise or callback from your httpPost instead of the usual return of cached events. Try it if it works.

0
source

You can use grid.api.core.notifyDataChange( uiGridConstants.dataChange.ALL );

0
source

More articles:


All Articles