How To Customize UI-Grid Height Dynamically

In this article, you will learn how to customize UI-Grid height dynamically based on record count list.

Intro

When we use UI-Grid with paging and load data from the database, then we provide constant height for that grid but sometimes the grid has fewer records and then we see some blank space in the bottom of the grid. So this article is about how to get rid of that blank space and customize grid height dynamically based on record count.

This is the second part for my existing article Custom Paging in Angular UI-Grid. Now we have records list based on custom paging.

Let’s take some screenshots with less data, so you can understand better.

In a given screenshot, as you can see, the grid has five records but still I can see some unused space in the bottom. So let’s get rid of this blank space dynamically.

Add the following function after adding previous article code.

// for resize grid's height dynamically based on pageSize
$scope.tableHeight = 'height: 600px';

function getTableHeight(totalPage, currentPage, pageSize, dataLen) {
    var rowHeight = 30; // row height
    var headerHeight = 50; // header height
    var footerHeight = 60; // bottom scroll bar height
    var totalH = 0;
    if (totalPage > 1) {
        if (currentPage < totalPage) {
            totalH = pageSize * rowHeight + headerHeight + footerHeight;
        } else {
            var lastPageSize = dataLen % pageSize;
            if (lastPageSize === 0) {
                totalH = pageSize * rowHeight + headerHeight + footerHeight;
            } else {
                totalH = lastPageSize * rowHeight + headerHeight + footerHeight;
            }
        }
        console.log(totalH);
    } else {
        totalH = dataLen * rowHeight + headerHeight + footerHeight;
    }
    return 'height: ' + (totalH) + 'px';
}
$interval(function() {
    $scope.tableHeight = getTableHeight($scope.totalPage, $scope.currentPage, $scope.pageSize, $scope.gridOptions.data.length);
    console.log($scope.tableHeight);
    $scope.gridApi.grid.handleWindowResize();
    $scope.gridApi.core.refresh();
}, 200);

 

Now go back to html and add this style in UI-Grid.

<div ng-controller="employeeController">
    <div ui-grid="gridOptions" ui-grid-pagination ui-grid-selection ui-grid-exporter ui-grid-resize-columns ui-grid-auto-resize class="grid" style="{{tableHeight}}"> </div>
</div>

As you can see grid has a style tableHeight.

As everything is done, run the application.

As you can see in given screenshot, record count is five then grid has height accordingly. Let’s change the record count to 10 or 20.

As you can see in screenshot 3, I put record count as 10 and the grid height automatically increased.

Conclusion

In this article, we have seen how to implement custom height with Angular UI-Grid with Web API and Entity Framework in MVC. If you have any questions or comments, drop me a line in the comments section.