<!doctype html>
<html style="height:100%">
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.1/ui-grid.min.css">
<style>
.parent-grid {
width: 100%;
}
.main-content{
min-height: 100%;
height: 100%;
}
</style>
</head>
<body ng-app="uiGridResize" class="main-content">
<div ng-controller="index as vm">
<div id="grid1" ui-grid="{ data: data }" class="parent-grid" ui-grid-resize-columns ui-grid-auto-resize
ng-style="{'height' : gridHeight }"></div>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.1/ui-grid.min.js"></script>
<script src="app.js"></script>
</body>
</html>
angular.module('uiGridResize', ['ui.grid', 'ui.grid.resizeColumns'])
.controller("index", index);
function index($scope, $window) {
var vm = {
data: [],
gridHeight: '0px'
}
init();
return vm;
function init() {
vm.data = [
{
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true
},
{
"firstName": "Lorraine",
"lastName": "Wise",
"company": "Comveyer",
"employed": false
},
{
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": false
}
];
//pushing 100 rows
for(var counter=0; counter < 100; counter ++){
vm.data.push(vm.data[0]);
}
angular.extend($scope, vm);
resizeGrid();
angular.element($window).bind('resize', function () {
resizeGrid();
});
}
function resizeGrid() {
$scope.gridHeight = getGridHeight('parent-grid', 'main-content', 10);
}
function getGridHeight(gridClass, contentClass, bottomOffset) {
var contentOffset = angular.element(document.getElementsByClassName(contentClass)[0]).offset();
var contentHeight = angular.element(document.getElementsByClassName(contentClass)[0]).height();
var gridOffset = angular.element(document.getElementsByClassName(gridClass)).offset();
console.log(contentHeight)
if (gridOffset !== undefined) {
var gridHeight = contentHeight - (gridOffset.top) - bottomOffset;
return gridHeight + 'px';
}
}
}