CODEWITHSUNDEEP
javascriptasp.net-mvcangularjsng-grid
batuuu
batuuu

Reputation: 23

ng-grid doesn't update data

Trying to create simple working app with ng-grid and ASP.NET MVC. Client side:

  var app = angular.module('TestApp', ['ngGrid'])
  app.controller('MainController', function ($scope, $http) {
  $scope.addresses = []

  $scope.filterOptions = {
    filterText: "",
    useExternalFilter: true
  };

  $scope.update = function () {
        $http.get('/Home/GetData', {
            params: { filter: $scope.filterOptions.filterText }
        })
        .then(function (result) {
            $scope.addresses = result.data
            //alert(JSON.stringify(result))
        })
        $scope.$apply()
 }

 $scope.update()

 $scope.gridOptions = {
    data: 'addresses',
    headerRowHeight: '50',
    columnDefs: [
    { field: 'country', headerCellTemplate: '<table><tr><td>Country</td></tr><tr><td ng-controller="MainController"><input type="text" placeholder="" ng-model="filterOptions.filterText"/></td></tr></table>' },
    { field: 'city'},
    { field: 'street'},
    { field: 'house'},
    { field: 'zipcode'},
    { field: 'datec'}
    ]
};

$scope.$watch('filterOptions', function (newVal, oldVal) {
    if (newVal !== oldVal) {
        $scope.update()
    }
}, true);

I can see that i get correct data from:

 public ActionResult GetData(string filter)
    {
        var query = from c in db.Addresses where c.country.Contains(filter) select c;

        return Json(query.ToList(), JsonRequestBehavior.AllowGet);
    }

In my code, the .then callback is called, and I can browse all the returned adin data.addresses. Yet, nothing is displayed in the grid. No error appears in the console.

Upvotes: 2

Views: 7123

Answers (3)

RenleyRenfield
RenleyRenfield

Reputation: 321

On a side note. What worked for me (i was getting this same error) was to call gridApi.core.refresh()

this is what caused IE to refresh the grid, even when two-way binded data was updated on a modal.

Upvotes: 1

eAbi
eAbi

Reputation: 3480

For anyone else experiencing this problem, the issue was documented by many more people here

The problem, I think (because I've never had the time to dig deep into the module to see what's going on), is that any cached object references will be reused with their template representation. I couldn't reproduce the problem by only changing a few objects, but this happened to me as well after I processed the input data from ui-grid through a pipeline of filtering/sorting it. In the end I would have an array with new objects and old objects (references), and also, the objects were mutated.

So in the end, when I was experiencing this problem, I used angular.copy

$scope.uiGridOptions.data = angular.copy(theNewResultedArray);

Use this more like a workaround and be careful as it has some performance implications, and you should limit this use case only when your data doesn't update successfully.

Upvotes: 2

kjlubick
kjlubick

Reputation: 1318

I too experienced this problem with a beta version of Angular 1.3.

I fixed it by updating to the most recent version (1.3.10).

Upvotes: 0

Related Questions