Tuesday, June 30, 2015

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

3 comments:

  1. Close...contentOffset..is it used?
    getElementsByClassName returns array of elements. Might want to use getElementById. So not using classes, but element id's. Should help if multiple grids on page or class re-used.

    I haven't thought this all the way through yet.
    Maybe put a little code example up on Plunker.

    With so many changes happening, it might help to have version of angular used and version of ui-grid. Plunker example would help to show what versions are in use.

    ReplyDelete
    Replies
    1. Here is the Plunker for this
      http://plnkr.co/edit/LcGe64WkNOAJZfqc7Ics?p=preview
      Due to the way plunker is displaying, there are couple of minor issues in this code. Let me know if this does not work properly in a full size window.

      I agree that it is better to use elementid instead of class.

      Delete