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
  2. This article is really helpful for me. I am regular visitor to this blog. Share such kind of article more in future. Personally i like this article a lot and you can have a look at my services also: I was seriously search for a Salesforce training institutes in ameerpet which offer job assistance and Salesforce training institutes in Hyderabad who are providing certification material. It's worth to join Salesforce training institutes in India because of their real time projects material and 24x7 support from customer desk. You can easily find the best Salesforce training institutes in kukatpally kphb which are also a part of Pega training institutes in hyderabad. This is amazing to join Data science training institutes in ameerpet who are quire popular with Selenium training institutes in ameerpet and trending coureses like Java training institutes in ameerpet and data science related programming coures python training institutes in ameerpet If you want HCM course then this workday training institutes in ameerpet is best for you to get job on workday.

    ReplyDelete