Not all rows are rendered in ng-grid

Question

in my project I'm fetching data from the server, and receive 20 data-items. However, only 6 rows are rendered, and inside ng-repeat there are 6 of them. However the height of the canvas is calculated correctly All other items appears after resize of the window. This issue is similar to: https://github.com/angular-ui/ng-grid/issues/860 but using virtualizationThreshold doesn't work for me and there is no other way around

Here is part of controllers code:

app.controller('NagruzkaController', ['$scope', 'NagruzkaService', 'Cacher', 'RawInfoRetriever', '$timeout',
function ($scope, NagruzkaService, Cacher, RawInfoRetriever, $timeout) {
    $scope.configRequest = {};

    $scope.showLoader = false;
    $scope.showTable = false;

    $scope.fetch = function () {
        $scope.showLoader = true;

            NagruzkaService.getAll().then(function (data) {
                var tmp = RawInfoRetriever(data);
                $scope.nagruzkaData = tmp;
                Cacher.nagruzka = $scope.nagruzkaData;

                $scope.showLoader = false;
                $scope.showTable = true;
            });
        }
    };

    $scope.gridOptions = {
        data: 'nagruzkaData',
        enableColumnResize: true,
        showGroupPanel: true
    };

In my html template I use ng-grid in this way:

<div class="gridStyle" ng-grid="gridOptions" ng-show="showTable"></div>

I got ng-grid via npm and my current version is 2.0.1 I've tried to get later version and tried to use 2.0.14, however with this version rows are not shown at all, untill window resizing.

Can anyone help me with this?

Answer 1

Eventually, as I need to solve that problem as quick as I could, I ended up just triggering empty 'resize' event via jQuery, which made ng-grid rebuild and show all data received from the server.

Answer 2

You will have to use a ng-grid plugin Flexible Height Plugin. Add this plugin to plugins property of the grid options.

$scope.gridOptions = {
    data: 'nagruzkaData',
    enableColumnResize: true,
    showGroupPanel: true,
    plugins: [new ngGridFlexibleHeightPlugin()]
};

Answer 3

please use this for not Not all rows are rendered in ng-grid it will work 100%

 $scope.gridOptions.excessRows = 100;