UI-grid: Bootstrap Styled and Dynamic Height for Pagination

     If you've looked at my catalog-demo, you might have noticed that I used UI-grid instead of Ng-grid. I still work on a few ng-grids but I've started to really use ui-grids.




Code:
        $scope.gridOptions.onRegisterApi = function(gridApi){
            gridApi.pagination.on.paginationChanged($scope, function (pageNumber, pageSize) {
                var newHeight = (pageSize * 30) + 68;
                angular.element(document.getElementsByClassName('grid')[0]).css('height', newHeight + 'px');  
                console.log('get pageSize - ',  pageSize);
            });
        };

Solution:

Notes
   To get the grid's height multiple the grid by 30px and the page size. Then add 68 to prevent the scroll-wheel moving the grid ever so slightly. Set the default for you're page size in css as well. The css I created to make the grid look like a bootstrap table is very basic and probably could use a lot more styling. Like the column controls could look more like a bootstrap dropdown but I was just interested in first appearances.

Research
angularjs - Using ui-grid constants to disable scrollbars - Stack Overflow
Angular ui-grid dynamically calculate height of the grid- This really help influcence my approach.

Popular posts from this blog

Nginx Best Practices Extended

Installing Windows on Acer chromebook 15 cb3-532

Entity Framework: ToListAynsc & WhereAsync