angular ui-grid auto height if rows have non-constant height

Question

I'm trying to make angular ui-grid automatically resize the height so that all rows are shown without the need of its scrollbar, but without wasting space if there are only a couple rows in the grid. Someone has asked a similar question (Angular ui-grid dynamically calculate height of the grid), but the question presupposes that the row heights are constant. If the row heights are different (for example, because you have word-wrap enabled), then the accepted solution to the problem (https://mcmap.net/q/370206/-angular-ui-grid-dynamically-calculate-height-of-the-grid) won't work, because the solution as does the question assumes constant row height. If I have a cell with a large amount of text in it, and the text wraps to the next line, then that rows height is different.

I found a possible solution by the user anhkind here: (https://github.com/angular-ui/ui-grid/issues/1735)

.ui-grid, .ui-grid-viewport {
  height: auto !important;
}

"And of course minRowsToShow and virtualizationThreshold should be set to the size of the list."

However, when I deploy his solution, it takes a much longer time for the grid to render.

Does anyone know how to address this or have an alternative solution?

Redwood

Answer 1

    $scope._minRows = 10;
    $scope._maxRows = 10;

   // Lots of Grid Options, plus data setting going on here.

    $scope.agendaItemsGridOptions.onRegisterApi = function(gridApi) {
        //set gridApi on scope
        $scope.gridApi = gridApi;
    });

    var setMinRowsLogic = function() {
        $scope.gridApi.grid.options.minRowsToShow = $scope._minRows;
        if (!_.isUndefined($scope.agendaItemsGridOptions.data)) {
            var len = $scope.agendaItemsGridOptions.data.length;
            if (len > $scope._maxRows) {

                $scope.gridApi.grid.options.minRowsToShow = $scope._maxRows;
            } else
            if (len < $scope._minRows) {
                $scope.gridApi.grid.options.minRowsToShow = $scope._minRows;
            } else {
                $scope.gridApi.grid.options.minRowsToShow = len;
            }
        }
    };

Leman

You can set _minRows = 1 and it will always be at least one row if there is NO data. Otherwise it will always be the size of .data[] up to _maxRows (and you can set that high or change logic such that it will always be the seize of data[]). – Leman

I do not use the css rules you suggested for the reason you write. – Leman

Last comment, call setMinRowsLogic() whenever the .data[] is modified. – Leman

Yes, but if the row height isn't constant (because some rows have a larger height than others, because the text in the cell is so long that is wraps to the next line), then setting the minRowsToShow to data.length won't make the grid height tall enough. – Redwood

nod. As a UI designer I don't really like to wrap the data. I think that on those cells I create a bubble that will show with all the data and put a make an indication that there is more data to see if the user cares for it. Just me. So far this has worked well but I can see where it might not. I don't think a grid cell is something a user should have to read multiple lines from. – Leman