How do I do dynamic height based on row count on the angulargrid

See more:

AngularJs

I am using angulargrid library for a table grid. I am trying to implement dynamic height based on row count on the angulargrid and make my table fit the whole page and not scroll the data in a small table as is now.To do that I wrote a function that could help achieve this task.

My code: angularjs

var columnDefs = [

{headerName:”headerName1” field: “field1”}
{headerName:”headerName2” field: “field2”}

];
var rowData = [];
scope.gridOptions = {
columnDefs: columnDefs,
rowData: null,
pinnedColumnCount: 2,
dontUseScrolls: true,
angularCompileRows: true,
enableSorting: true,
enableCellExpressions: true,
enableFilter: true,
rowSelection: 'multiple',
groupSuppressAutoColumn: true,
groupIncludeFooter: false,
groupHidePivotColumns:true,
groupUseEntireRow: true,


function setHeight(more) {
scope.height = (($scope.gridOptions.data.length * 30) + 30);
if (more) {
scope.height += more
}
scope.gridOptions.api.gridHeight = scope.height;


HTML:



It does not resize the grid dynamically. Nothing happens exactly to my data. Can someone please help me why this is not working?