Angular ui-grid dynamically calculate height of the grid
I use ui-grid - v3.0.0-rc.20
because a scrolling issue is fixed when you go full height of container. Use the ui.grid.autoResize
module will dynamically auto resize the grid to fit your data. To calculate the height of your grid use the function below. The ui-if
is optional to wait until your data is set before rendering.
angular.module('app',['ui.grid','ui.grid.autoResize']).controller('AppController', ['uiGridConstants', function(uiGridConstants) { ... $scope.gridData = { rowHeight: 30, // set row height, this is default size ... }; ... $scope.getTableHeight = function() { var rowHeight = 30; // your row height var headerHeight = 30; // your header height return { height: ($scope.gridData.data.length * rowHeight + headerHeight) + "px" }; }; ...
<div ui-if="gridData.data.length>0" id="grid1" ui-grid="gridData" class="grid" ui-grid-auto-resize ng-style="getTableHeight()"></div>
A simpler approach is set use css
combined with setting the minRowsToShow
and virtualizationThreshold
value dynamically.
In stylesheet:
.ui-grid, .ui-grid-viewport { height: auto !important;}
In code, call the below function every time you change your data
in gridOptions
. maxRowToShow
is the value you pre-defined, for my use case, I set it to 25.
ES5:
setMinRowsToShow(){ //if data length is smaller, we shrink. otherwise we can do pagination. $scope.gridOptions.minRowsToShow = Math.min($scope.gridOptions.data.length, $scope.maxRowToShow); $scope.gridOptions.virtualizationThreshold = $scope.gridOptions.minRowsToShow ;}
.ui-grid, .ui-grid-viewport,.ui-grid-contents-wrapper, .ui-grid-canvas { height: auto !important; }