javascript - how to force automatically refresh ui-grid after adding row - Stack Overflow

admin管理员组

文章数量:1287656

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.

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.

• javascript
• angularjs
• angular-ui-grid

Share Improve this question Follow edited Jun 7, 2016 at 17:45 Anton asked Jun 2, 2016 at 17:59 AntonAnton 79644 gold badges1414 silver badges3535 bronze badges 4

• Where do you bind the original data to the grid when you first open the grid? I do not see that code. – Rani Radcliff Commented Jun 7, 2016 at 17:26
• @RaniRadcliff check up updated post, please – Anton Commented Jun 7, 2016 at 17:29
• After your insert, does result.data contain just the inserted row or the entire set of data? – Rani Radcliff Commented Jun 7, 2016 at 17:34
• @RaniRadcliff yes it does. $log.info shows inserted row – Anton Commented Jun 7, 2016 at 17:40

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Try this in your "then" function:

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

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

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

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.

本文标签： javascripthow to force automatically refresh uigrid after adding rowStack Overflow