AngularJS UI Grid Vertical Resize

I was working on a scenario where I want the UI grid to take up all the available space in the browser, both vertically and horizontally. Doing horizontally is easy, I just need to set the width to 100% and specify “ui-grid-auto-resize”.

The trick is to make the grid resize vertically. For this I wrote a small script which calculates the grid height.

    function getGridHeight(gridClass, contentClass, bottomOffset) {

        var contentOffset = angular.element(document.getElementsByClassName(contentClass)).offset();

        var contentHeight = angular.element(document.getElementsByClassName(contentClass)[0]).height();

        var gridOffset = angular.element(document.getElementsByClassName(gridClass)).offset();

        if (gridOffset !== undefined) {

            var gridHeight = contentHeight - (gridOffset.top) - bottomOffset;

            return gridHeight + 'px';

        }

    }

The above function takes the following three parameters:

• gridClass – This class is used to identify the current location of the grid in the browser
• contentClass – This class is the container class of the grid (could be body tag) and this is needed to find the relative position of the grid with in the browser
• bottomOffset – This specifies how much space we need to leave at the bottom of the window

Now we need to associate this function with the grid height in our angular view and controller. First let’s do the binding in the view as shown below (I am binding the gridHeight to the height of the UI-Grid)

<div ui-grid="vm.gridOptions" external-scopes="vm" ui-grid-resize-columns ui-grid-auto-resize class="patient-grid" ng-style="{'height' : vm.gridHeight }"></div>

In the controller, I will calculate the grid height whenever window resizes as shown below

	function resizeGrid() {
	vm.gridHeight = utility.getGridHeight('patient-grid', ‘main-content’, 40);
	}

	angular.element($window).bind('resize', function () {
	resizeGrid();
	});

With the above code, the UI grid would be responsive to the browser height.

Here is the Plunker for this code snippet
http://plnkr.co/edit/LcGe64WkNOAJZfqc7Ics?p=preview