Angular js UI grid is not getting updated with new content

Question

I am calling $http.get to get new content from the server for angular ui grid. On change of date in the datepicker I trigger an ng-change event to make another http call to get new content. The call is successful but the grid is not updated with new content.$scope.grid.core.notifyDataChange() throws error when called inside the http success call back.Please suggest ways to update the grid with new content.

Please find the plnkr code. when I click load button, I want to update grid with new JSON data using http call but it is not updating grid. http://plnkr.co/edit/S2A3scEoO6QIGFbru3Lr?p=preview

Please provide the code you are using so someone may be able to help. — Tristan
– Tristan, Commented Nov 14, 2015 at 6:27
Please find the plnkr code. when I click load button, I want to update grid with new JSON data using http call but it is not updating grid. plnkr.co/edit/S2A3scEoO6QIGFbru3Lr?p=preview — vignesh
– vignesh, Commented Nov 14, 2015 at 16:53

imbalind · Accepted Answer · 2015-11-16 09:56:12Z

1

The problem with your example is inside $http's success method(lines 256-260).

$http.get(...).success(
  function(data){
    $scope.roData = data;
});

There you are just putting your data inside a scope property ($scope.roData), but then you're not doing anything with that scope property.

Furthermore you're trying to assign a wrong value to uiGrid.gridOptions.data with the lines:

if($scope.gridOptions.data ==='rData'){
  $scope.gridOptions.data = 'roData';
}

But you did 2 mistakes:

Treating variables as string, and this is not going to work. Inside your JS files you need to access your scope with $scope.nameOfVariable not by using their names as strings like 'nameOfVariable'.
You put these lines outside of your success method, so they are executed before you actually get your data.

I managed to edit your plunker and make it work, you can find it here. What I did was putting your lines together and fix the name error. I did not put there any if since I don't know what logic you wanted to accomplish.

$http.get(...).success(
  function(data){
    $scope.roData = data;
    $scope.gridOptions.data = $scope.roData;
});

answered Nov 16, 2015 at 9:56

imbalind

1,1826 silver badges13 bronze badges

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

2 Comments

vignesh Over a year ago

Thank you so much for your help.

MrYellow Nov 10 at 6:19

> Treating variables as string, and this is not going to work. It's literally what the docs say. > The most flexible usage is to set your data on $scope: > $scope.data = data; > And then direct the grid to resolve whatever is in $scope.data: > $scope.gridOptions.data = 'data';

Collectives™ on Stack Overflow

Angular js UI grid is not getting updated with new content

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related