how to force automatically refresh ui-grid after adding row

Question

I spent a long time that to resolve this problem and need some help. I'm rendering grid on my page with help Angular Ui-Grid, but cannot force it to refresh data after I've added new row. In my main controller I have function 'create event' which is calling service and template for modal that to upload 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)

        };

submit event and insert event from event controller look like

 $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 insert works great, modal works great but grid doesn't update even if I'm trying to return promise or callback, it doesn't help,

I've tried to set refreshing after modal has been closed, event has been inserted or when submit button has been clicked, but nothing helps

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

also I've tried to set notification if grid has been changed, but it 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)
            }

original grid data initialization

 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 somebody could help me to find my mistake.

Inkling

Where do you bind the original data to the grid when you first open the grid? I do not see that code. – Parallel

@RaniRadcliff check up updated post, please – Inkling

After your insert, does result.data contain just the inserted row or the entire set of data? – Parallel

@RaniRadcliff yes it does. $log.info shows inserted row – Inkling

Answer 1

Try this in your "then" function:

$scope.gridOptions.data.push(result.data);

Parallel

$scope.gridOptions.data.push(result.data); can't be used inside then cause insertEvent inside factory – Inkling

The only way I know to update the grid is to rebind it to a data model. Somehow, somewhere, you need to push the new information into your current data model and set that as your gridOptions.data. – Parallel

The thing is I did rootScope function with refresh drig based on api and called refresh, then inside edit event controller I setup timeout 1500 with this function. It is absolutely ugly method cause I'm using rootScope but it works for now – Inkling

I do this all the time, but I use a service, not a factory and just bind the new data in my success function. – Parallel

could you give me any simple example how you are doing this? – Inkling

The service uses http.post (sort of like the http.get you use above). It returns a success object which I bind to grid the way I showed you in my answer by just pushing the result (which is Json) to the grid. – Parallel

Answer 2

Can you try returning a promise or a callback from your httpPost instead of just normally returning cached events. Try if this works.

Arlinda

I did return result.data; but gris is still not updating – Inkling

Ok, when you are returning from a function the caller function expects the returned data without any delay. But since you are returning from a httpPost, delay is expected and your caller gets nothing at that instance and assume it as undefined. So what I guess could solve your issue is instead of return result.data, try sending it in a callback or resolve it using a promise. – Arlinda

Considering angular docs I've wrote var insertEvent = function (event) { return $http({ method : 'POST', url : apiUrl, data : event }) .then(function success (response ) { return response.data; }, function error (responce){ console.log(" post has been fault ") }) }; Post works fine but grid doesn't – Inkling

Answer 3

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

Hegelianism

Answer 4

You can use $scope.grid.options.data.push(data); then scope.grid.refresh(); but the problem is if you are exporting data as PDF or CSV the newly added data is not reflected.

Van