Angular UI-Grid onRegisterApi not firing

Question

I've been trying for hours to get this working. I load a few grids organized by data category, then I'd like to have another grid at the bottom of the page with all data category agnostic. The grids are hidden at first, so users can click on each individual category to see the respective grid, so I need to extract the api for each grid and call handleWindowResize() on them when they are clicked.

I think the problem is that onRegisterApi is not executing for the allData grid. Everything else works like a charm.

$scope.globalColumnDefs = [//column definitions here];
$scope.dataList = {};
$scope.allData = [];
$scope.gridOptions = [];
$scope.gridApis = [];
dataFactory.getData().success(function (data) {
        $scope.dataList = data.dataCategories;

        //set up each grid for data categories
        angular.forEach($scope.dataList, function (value) {
            $scope.allData = $scope.allData.concat(value.items);
            $scope.gridOptions.push({
                data: value.items,
                minRowsToShow: 25,
                showColumnFooter: true,
                enableFiltering: true,
                columnDefs: $scope.globalColumnDefs,
                onRegisterApi: function (api) {
                    $scope.gridApis.push(api);
                }
            });
        });

        //set up the allData grid
        $scope.gridOptions.push({
            data: $scope.allData,
            minRowsToShow: 25,
            showColumnFooter: true,
            enableFiltering: true,
            columnDefs: $scope.globalColumnDefs,
            onRegisterApi: function (api) {
                console.log("Regiestering API");
                $scope.gridApis.push(api);
            }
        });
    });

the console.log statement never fires (but it will if I put it in the first foreach loop). I started out with the loops combined and simply changing the data of the gridOptions object each time, but that didn't work. I also tried moving the allData to a new grid variable with new grid options with no luck.

Why isn't onRegisterApi firing for the allData grid??

Answer 1

I had a similar issue. That was because I forgot to put

<div ui-grid="gridOptions" ui-grid-selection class="grid"></div>

in the .html. Turns out that the ui-grid="griOptions" fires the onRegisterApi in the .js.

Answer 2

onRegisterApi is called by ui-grid directive, so it's related to the rendering of the grid.

Here it seems you are adding the listener when some data gets returned, and this may as well happen after the rendering is complete. If this is the case (which is quite hard to say without a working example or a plunkr) then the listener will never get called.

My suggestion is to define the gridOptions inside of your controller (i.e. on page load) and then to use the dataFactory.getData().success promise to update only gridOptions' data property

Answer 3

Api has been alreadyd registered prior to your dataFactory request ended.

So you event was fired, but your listener was not attached yet.

Answer 4

$scope.globalColumnDefs = [//column definitions here];
 $scope.dataList = {};
 $scope.allData = [];
 $scope.gridOptions = [];
 $scope.gridOption = {
    minRowsToShow: 25,
    showColumnFooter: true,
    enableFiltering: true,
    columnDefs: $scope.globalColumnDefs,
    onRegisterApi: function (api) {
        alert('now it work')
        $scope.gridApis.push(api);
    }
};
$scope.gridApis = [];
dataFactory.getData().success(function (data) {
        $scope.dataList = data.dataCategories;

        //set up each grid for data categories
        angular.forEach($scope.dataList, function (value) {
            $scope.allData = $scope.allData.concat(value.items);

            $scope.gridOption.data = value.items;
            $scope.gridOptions.push($scope.gridOption);
        });

        //set up the allData grid
        $scope.gridOption.data = $scope.allData;
        $scope.gridOptions.push($scope.gridOption);

    });

Answer 5

Setting interval to 0 had solved my problem:

$interval(function (){
    $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN); }
    ,0);