For the need of a simple tabular Grid in your Angular JS application, one of the most basic and simple to use package is angular-ui-grid. The implementation is easy in many of the use cases, but when it comes to extend the limits of the ui-grid, life becomes tough.
One of the tricky task is to set the Grid height as dynamic, in other words to make the grid more flexible to number of rows and the grid size would depend on it.
Lets begin with the
One of the tricky task is to set the Grid height as dynamic, in other words to make the grid more flexible to number of rows and the grid size would depend on it.
Lets begin with the
Prerequisites:
- Angular JS: v1.4.2
- ui-grid-stable: v3.0.1
- Dataset: https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json
the Dataset contains 100 rows
In case you are new to ui-grid refer to the official doc: angular-ui-grid
In case you are new to ui-grid refer to the official doc: angular-ui-grid
Refer to the complete code in this plnkr: http://plnkr.co/edit/i5zAuUKz2RdJpuq5YKud
The Next Step-
Setting up all the things:
- Create 3 file:
- app.js - Contains your Angular JS code.
- index.html - Contains the UI HTML5 code.
- main.css - Our styling stuff goes here.
- Required imports in index.html are:
- JS Scripts
- src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"
- src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-touch.js"
- src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-animate.js"
- src="http://ui-grid.info/release/ui-grid-stable.js"
- CSS Styling
- href="http://ui-grid.info/release/ui-grid-stable.css"
Lets jump to the code:
Our base controller is in app.js
var app = angular.module('app', ['ngAnimate', 'ui.grid']); app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { $scope.maxRowToShow = 1000; $scope.gridOptions = { enableColumnMenus: false, enableHiding: false, enableSorting: false }; $scope.gridOptions.columnDefs= [ { field: 'name' }, { field: 'gender' }, { field: 'company', enableSorting: false } ]; $scope.getTableHeight = getTableHeight; $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json') .success(function(data) { $scope.gridOptions.data = data; setMinRowsToShow(); }); function setMinRowsToShow(){ //This function is to set the rowContainer with minimum row limit to be stored //in the visibleRowCache. //It handles and rogue cache or missed rows due to dynamically generated Table Height. $scope.gridOptions.minRowsToShow = Math.min($scope.gridOptions.data.length, $scope.maxRowToShow); $scope.gridOptions.virtualizationThreshold = $scope.gridOptions.minRowsToShow ; } function getTableHeight() { let rowHeight = 37; // row height let headerHeight = 48; // header height return { height: ($scope.gridOptions.data.length * rowHeight + headerHeight) + "px" }; } }]);
Dive in the Code:
- maxRowToShow: This defines the upper limit of rows to be rendered
- Initial Grid config:
- enableColumnMenus: false,
- enableHiding: false,
- enableSorting: false
- Fetch and store data in scope.gridOptions.data
- getTableHeight: Now here is where the magic happens-
- we give the rowHeight and headerHeight as defined in our css or as per your requirement
- Calculation of height attribute using the below formula:-
(Number of data rows) * rowHeight + headerHeight [in px]
- columnDefs: Contains the meta data for your grid column, like name, specific formatting etc.
- Lastly, the one which is bit confusion is setMinRowsToShow, which we will cover once i have shown you the output
The initial output looks like this without dynamic height:
Now with the Dynamic Height:
![]() |
UI Grid with dynamic height, but we can see a large white gap between the last row and footer |
As you can see in the above image there is a large white gap between the last row and footer, this is because of below reason:
- grid.renderContainers.body.visibleRowCache does not refresh the renderedRows arry when splicing in more data. That means when the number of rows are more in conjunction with the grid height, the module is unable to refresh renderedRows and we see only 4 rows
Here are the counts: - renderedRows: 4
- visibleRowCache: 100
- visibleColumnCache: 3
- viewportAdjuster: 1
- The above issue of only 4 rows in renderedRows array is due to the fact that ui-grid does not completely support dynamic height feature.
- But there is this parameter which comes to our rescue - virtualisationThreshold
- Lets fix the above issue gracefully:
$scope.gridOptions.minRowsToShow = Math.min($scope.gridOptions.data.length, $scope.maxRowToShow); $scope.gridOptions.virtualizationThreshold = $scope.gridOptions.minRowsToShow ;
In Above code we will set gridOptions.virtualizationThreshold to the number of data rows or the max rows as configured, this was the ui-grid rendering mechanism knows that how many rows it need to check for to refresh renderedRows.
After the above changes our issue is resolved and we see the output like below:
After the above changes our issue is resolved and we see the output like below:
Hope you find this article useful, let me know the feedback or any queries below as comments.
Add a comment