Angular ui-grid auto height not working

Question

I am using angular ui-grid for show records. I have a product which has only 7 records, and another product which has 200 records. By default max row are selected to 20 when records are greater than 20, when records are less than 20 grid will auto resize depending on records count.

Problem is that; when I load 7 records in grid, the height of grid is according to 7 records, keeping there without refreshing page, when I type another records which has 200 entries in search box and submit, it assigns all records to grid but the size of grid remains the same as of 7 records.

I need to make grid auto resizeable according to records, keeping 20 records in page in records are more than or equal to 20.

here is some code from grid directive;

scope.configuration = {
            data: scope.data,
            exporterCsvFilename: 'testfile' + '.csv',
            exporterMenuPdf: true,
            enableSelectAll: true,
            // enablePaging: true,
            enablePaginationControls: true,
            paginationPageSizes: [10, 20, 30, 40, 50, 100],
            enableGridMenu: true,
            enableFiltering: true,
            paginationPageSize: (scope.largeGrid) ? 20 : 10,
            enableHorizontalScrollbar: 1,
            enableVerticalScrollbar: 0,

heights

scope.getGridHeight = function (data) {
                var length = (scope.configuration.paginationPageSize > data.length) ? data.length : scope.configuration.paginationPageSize;
                var rowHeight = (scope.autoHeightColumn) ? scope.getAutoHeight(data, scope.autoHeightColumn) : 30; // your row height
                var headerHeight = 50; // your header height
                var filterHeight = 62; // your filter height
                if (scope.autoHeightColumn) {
                    return rowHeight + headerHeight + filterHeight + 'px';
                }
                return length * rowHeight + headerHeight + filterHeight + 'px';
            };

            scope.$watch('configuration.paginationPageSize', function () {
                scope.gridHeight = scope.getGridHeight(scope.data);
                //kind of hack: as minification does not setting interpolated variable.
                $('#grid').css('height', scope.gridHeight);
            });

            scope.getAutoHeight = function (data, colum) {
                //Todo: Get pagination and data height separately
                var totalHeight = 0;
                for (var i = 0; i < data.length; i++) {
                    var columnHeight = data[i][colum].length;
                    if (columnHeight) {
                        columnHeight = (columnHeight / 12) * 23;
                    } else {
                        columnHeight = 23;
                    }
                    totalHeight += columnHeight;
                }
                return totalHeight;
            };

score 0 · Answer 1 · answered May 07 '18 at 06:26

we can achieve ui-grid auto height using some css overrides.

    .ui-grid-viewport
    {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    .ui-grid, .ui-grid-viewport
    {
        height: auto !important;
    }
    .ui-grid-viewport, .ui-grid-canvas
    {
        height: auto !important;
    }

    .ui-grid-row, .ui-grid-cell
    {
        height: auto !important;
    }
    .ui-grid-row div[role=row]
    {
        display: flex;
        align-content: stretch;
    }
    .ui-grid, .ui-grid-viewport
    {
        height: auto !important;
    }
    .ui-grid-viewport, .ui-grid-canvas
    {
        height: auto !important;
    }

Angular ui-grid auto height not working

1 Answers1