CODEWITHSUNDEEP
angularjsng-gridangular-ui-grid
Python Boy
Python Boy

Reputation: 161

How to dynamically resize the UI Grid according to the number of records?

firstly I dont want vertical scroll bar I'm doing something like this

var height = (rowLength*30)+100; angular.element(document.getElementById('grid1')).css('height', height + 'px');

with this I am able to resize the grid but it always shows the number of records visible to the viewspan. For ex. I have 40 records fetched from the rest side and resized the grid accordingly but it would only display 25 records and remaining page goes blank.

Any share on this one? Thanks!

Upvotes: 2

Views: 13575

Answers (3)

MrYellow
MrYellow

Reputation: 409

ui-grid-auto-resize seems rather poor and incomplete.

You can instead force a re-calculation of col sizes and queue a refresh with:

gridApi.core.handleWindowResize();

Upvotes: 0

CMR
CMR

Reputation: 933

You can use their auto-resize directive, as shown in their tutorial page.

Another easy way is to use style-attribute with auto-resize

<div id="grid2"
  ui-grid="vm.gridOptions"
  ui-grid-auto-resize
  style="height: {{vm.desiredTableHeight + 'px'}}; width: {{vm.desiredTableWidth + 'px'}};">
</div>

When vm.desiredTableHeight or vm.desiredTableWidth change, angular will notice and the directive will trigger.

Upvotes: 3

Python Boy
Python Boy

Reputation: 161

The actual answer to my question was the property virtualizationthreshold to be set to number of rows, by default it is around 20 and hence the rows appeared blanked since the grid never rendereed completely

Upvotes: 0

Related Questions