Posts

Showing posts with the label UI-Grid

UI-grid: Bootstrap Styled and Dynamic Height for Pagination

Image
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: https://fassetar.github.io/blog-examples/uigrid-responsiveheight/

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 proba…

UI-grid: Bootstrap Styled and Dynamic Height for Pagination

Image
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 l…