AngularJs UI Grid rebind from Modal

Question

I have a main controller in which I load data into a "angular-ui-grid" and where I use a bootstrap modal form to modify detail data, calling ng-dlbclick in a modified row template :

app.controller('MainController', function ($scope, $modal, $log, SubjectService) {
    var vm = this;    
    gridDataBindings();

    //Function to load all records
    function gridDataBindings() {
        var subjectListGet = SubjectService.getSubjects(); //Call WebApi by a service

        subjectListGet.then(function (result) {
            $scope.resultData = result.data;
        }, function (ex) {
            $log.error('Subject GET error', ex);
        });

    $scope.gridOptions = {                 //grid definition
        columnDefs: [
          { name: 'Id', field: 'Id' }
        ],
        data: 'resultData',
        rowTemplate: "<div ng-dblclick=\"grid.appScope.editRow(grid,row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\" ui-grid-cell></div>"
    };

    $scope.editRow = function (grid, row) {                 //edit row 
        $modal.open({
            templateUrl: 'ngTemplate/SubjectDetail.aspx',
            controller: 'RowEditCtrl',
            controllerAs: 'vm',
            windowClass: 'app-modal-window',
            resolve: {
                grid: function () { return grid; },
                row: function () { return row; }
          }
        });
    }
});

In the controller 'RowEditCtrl' I perform the insert/update operation and on the save function I want to rebind the grid after insert/update operation. This is the code :

app.controller('RowEditCtrl', function ($modalInstance, $log, grid, row,  SubjectService) {
    var vm = this;
    vm.entity = angular.copy(row.entity);
    vm.save = save;

    function save() {
        if (vm.entity.Id === '-1') {
            var promisePost = SubjectService.post(vm.entity);
            promisePost.then(function (result) {
                //GRID REBIND  ?????      
            }, function (ex) {
                $log.error("Subject POST error",ex);
            });
        }
        else {
            var promisePut = SubjectService.put(vm.entity.Id, vm.entity);
            promisePut.then(function (result) {
                //row.entity = angular.extend(row.entity, vm.entity);
                //CORRECT WAY?
            }, function (ex) {
                $log.error("Subject PUT error",ex);
            });
        }
        $modalInstance.close(row.entity);
    }
});

I tried grid.refresh() or grid.data.push() but seems that all operation on the 'grid' parameter is undefinied.

Which is the best method for rebind/refresh an ui-grid from a bootstrap modal ?

Answer 1

I finally solved in this way:

In RowEditCtrl

            var promisePost = SubjectService.post(vm.entity);
            promisePost.then(function (result) {                
            vm.entity.Id = result.data;
            row.entity = angular.extend(row.entity, vm.entity);
            $modalInstance.close({ type: "insert", result: row.entity });
        }, function (ex) {
            $log.error("Subject POST error",ex);
        });

In MainController

 modalInstance.result.then(function (opts) {
        if (opts.type === "insert") {
            $log.info("data push");
            $scope.resultData.push(opts.result);
        }
        else {
            $log.info("not insert");
        }

    });

Answer 2

The grid that received inside RowEditCtrl is not by reference, so it wont help to refresh inside the RowEditCtrl. Instead do it right after the modal promise resolve in your MainController. like this:

var modalInstance = $modal.open({ ...});

modalInstance.result.then(function (result) {
      grid.refresh() or grid.data.push()
});