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.

Where do you bind the original data to the grid when you first open the grid? I do not see that code. — Rani Radcliff
– Rani Radcliff, Commented Jun 7, 2016 at 17:26
After your insert, does result.data contain just the inserted row or the entire set of data? — Rani Radcliff
– Rani Radcliff, Commented Jun 7, 2016 at 17:34

Rani Radcliff · Accepted Answer · 2016-06-07 18:03:21Z

4

Try this in your "then" function:

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

answered Jun 7, 2016 at 18:03

Rani Radcliff

5,0965 gold badges39 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Anton Over a year ago

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

Rani Radcliff Over a year ago

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.

Anton Over a year ago

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

Rani Radcliff Over a year ago

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

Anton Over a year ago

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

|

Ankit Sharma · Accepted Answer · 2016-06-02 18:15:30Z

0

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

answered Jun 2, 2016 at 18:15

Ankit Sharma

114 bronze badges

3 Comments

Anton Over a year ago

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

Ankit Sharma Over a year ago

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.

Anton Over a year ago

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

Peter · Accepted Answer · 2017-07-14 15:27:13Z

0

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

edited Jul 14, 2017 at 15:27

Peter

9331 gold badge12 silver badges25 bronze badges

answered Jul 14, 2017 at 8:56

Abhishek

12 bronze badges

Comments

Corentin Pane · Accepted Answer · 2019-10-24 07:15:44Z

0

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.

edited Oct 24, 2019 at 7:15

Corentin Pane

4,9531 gold badge15 silver badges32 bronze badges

answered Oct 24, 2019 at 6:55

Suresh B

1

Collectives™ on Stack Overflow

how to force automatically refresh ui-grid after adding row

4 Answers 4

6 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related