data binding - ui grid

Question

I am trying to implement UI-grid into my app. Everything works fine when I assign static data to gridOptions.data; however, when I assign the data to gridOptions.data dynamically after loading the data from the server, I always get an empty string. I tried replicating the dynamic behaviour using $timeout function as below, and the result is still the same: empty grid.

//ctrl begins

This works.

 $scope.data = [
             { addedBy :"user", displayName:"Name1" },
             { addedBy :"user2", displayName:"Name2" },
             { addedBy :"user3", displayName:"Name3" }
           ];

This does not; leaving grid empty.

 $timeout(function () {
       $scope.data = [
         { addedBy :"user", displayName:"Name1" },
         { addedBy :"user2", displayName:"Name2" },
         { addedBy :"user3", displayName:"Name3" }
       ];
     });

The rest of the code remains the same.

$scope.columnDefs = [
        {name: 'displayName'},
        {name: 'addedBy'}
      ];

$scope.gridOptions = { 
columnDefs: $scope.columnDefs, 
data: $scope.data 
};

//ctrl ends

//html begins

<div class="col-md-12 no-padding" ui-grid="gridOptions" class="grid"></div>

//html ends

I am pretty the ui-grid should be capable to update the data when data variable changes; so is there something basic that I am missing here?

ndoes · Accepted Answer · 2016-12-12T21:44:03.823

1

The data isn't available when the grid is initialized. You have to manually call notifydataChange for the grid to update or reassign it like Ronald says.

They have an example in their documentation of the latter

edited Dec 12 '16 at 21:44

answered Dec 12 '16 at 21:35

ndoes

667
5
16

thanks @ndoes , any idea what should be the parameter of the notifyDataChange call? Any link to it's examples/documentations would be helpful. I can see the example of removing/adding column in the link you shared, but any specific definition of the notifyDataChange api? – user1242321 Dec 12 '16 at 23:04
Ignore; I found it here: https://github.com/angular-ui/ui-grid/blob/441613f/src/js/core/factories/Grid.js#L617 and here: http://ui-grid.info/docs/#/api/ui.grid.class:Grid – user1242321 Dec 12 '16 at 23:06

score 0 · Answer 2 · answered Dec 12 '16 at 21:40

Another option you can do is default the grid definition to an empty array and in the response of your server call assign it to the grid.

$scope.columnDefs = [
        {name: 'displayName'},
        {name: 'addedBy'}
      ];

$scope.gridOptions = { 
columnDefs: $scope.columnDefs, 
data: []
}; 

 $timeout(function () {
       $scope.data = [
         { addedBy :"user", displayName:"Name1" },
         { addedBy :"user2", displayName:"Name2" },
         { addedBy :"user3", displayName:"Name3" }
       ];
 $scope.gridOptions.data=$scope.data;
     });

Bhavjot · Answer 3 · 2016-12-15T03:19:35.120

0

I have very dynamic grid, where data refreshes for lot of parameters. I always assign the data back to $scope.gridOptions.data directly.

I.e

$timeout(function () {
   $scope.gridOptions.data = [
     { addedBy :"user", displayName:"Name1" },
     { addedBy :"user2", displayName:"Name2" },
     { addedBy :"user3", displayName:"Name3" }
   ];
 });

Data is being reassigned here, for your every search result

NotifyDataChange event can be used like this:

$scope.gridOptions.onRegisterApi = function (gridApi) {
     //set gridApi on scope
     $scope.gridApi = gridApi;
        $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
   };

You have to add uiGridConstants dependency in your controller. But from my findings/tests, if you reassign the data to gridOptions.data, then notifyDataChange event is not required.

edited Dec 15 '16 at 03:19

answered Dec 13 '16 at 05:19

Bhavjot

544
5
16

does this work for you? It's strange coz as per the documentation, I found that one needs to call 'notifyDataChange' event, without which, the data is not supposed to be updated on the grid. – user1242321 Dec 14 '16 at 06:16
I found that I am using notifyDataChange event as well on grid. But in this scenario, data is being reassigned, so I think it should work without that event. I will be testing it sometime today, and update you with my results. – Bhavjot Dec 14 '16 at 21:12
Yes tested it, reassigning of data doesn't need notifyDataChange event – Bhavjot Dec 15 '16 at 03:16

data binding - ui grid

3 Answers3