galiolio
galiolio

Reputation: 275

Ui-grid Async call undefined gridApi in AngularJS

Hello I have a problem with ui-grid. When I do a sync call on my Api, the code passes through the onRegisterApi in the $scope.gridOptions.

But If I put the call in Async, It don't pass in the onRegisterApi and $scope.gridApi is undefened so I loose my filters.

Here is my definition of GridOptions :

 $scope.gridOptions = {                     
                    colDef = colDef,
                    data = $scope.rowCollection,
                    enableGridMenu: true,
                    enableFiltering: true,
                    onRegisterApi: function (gridApi) {
                        debugger; //Don't pass here with async call
                        $scope.gridApi = gridApi;

                    }
                }

Here is the begining of my api call :

$.ajax({
            url: Api.getHost() + "url/" + $scope.currentObjectType,
            async: true,
            type: "GET",
            datatype: "jsonp",
            contentType: "application/json",
            data: { page: $scope.page, number: $scope.number },
            beforeSend: function (xhr) {
                xhr.setRequestHeader('Authorization', 'Bearer ' + Api.getToken());
            },

Upvotes: 0

Views: 412

Answers (2)

galiolio
galiolio

Reputation: 275

I've found the solution, I had to declare the grid options out of the ajax call

Upvotes: 0

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

But If I put the call in Async, It don't pass in the onRegisterApi and $scope.gridApi is undefined so I loose my filters.

It happens because you use 3d party Ajax call and not angular way $http .

Option 1

For that reason try to use $timeout like:

// ...
$timeout(function(){
   $scope.gridOptions.data = YourNewData; 
})

Option 2: use $http

 $http({method: 'GET', url:URL}).then(function (result) {
      $scope.gridOptions.data = result.data;                            
 }, function (result) {

 });

Upvotes: 1

Related Questions