Request: Dynamic height based on row count

[joshmackey]

At the moment we solve this by changing the container height based on the number of rows in the grid but it would be nice to be able to tell ui-grid to not be constrained by a specific height so that all rows are visible without the grid itself having to scroll (its fine if the page needs to be scrolled).

While this can be done by setting the container height to something massive, it leaves lots of bordered whitespace which looks bad.

[anhkind]

I found out that the following css works for me (a small change from @viros) as it wouldn't jitter when I scroll over the list:

.ui-grid, .ui-grid-viewport {
  height: auto !important;
}

And of course minRowsToShow and virtualizationThreshold should be set to the size of the list.

[JnBrewsterGT]

I am successfully using minRowsToShow to dynamically manage my grid height when new data is retrieved.

I am wondering now about how to dynamically do the same when using a simple filter on a column. Is there an event fired off AFTER all data has ben set to visible and, furthermore, fired when the filter is cleared by pressing the 'x' button.

I capture the rowsVisibleChanged -- and that seems to catch the fact that rows are now decreased when a filter is used. However, when the "X" clear button is pressed I cannot find an event to capture and reset the minRowsToShow to a larger number.

For example a list of names, in the filter press "Brew" and the list shrinks to 15. However, backspace on the "w' should grow the list by 5 more. Pressing the 'x' clear button should take the list back to it max level. All along the minRowsToShow would decrease and increase accordingly. Regards,

[idoo]

@anhkind :+1:

[liamkennedy89]

cheers @anhkind

[shivece]

+1

[stewartvm]

Probably a bit simplistic but I went for putting the grid with height set to 100% in a div container. Once the data is loaded I just resize the container, in my case based on 25px per row and 25px per line of header and 25px to keep the scroll bar clear of the bottom.
So html;

<div id="bestFit" style="height:200px;">
   <div ag-grid="vm.gridOptions" class="ag-fresh" style="width: 100%;  height: 100%;"></div>

</div>

and script:

            vm.gridOptions.api.setRowData(idata);
            var maxHeight = (75 + (idata.length * 25));
            var minHeight = (75 + (10 * 25));
            var bestHeight = Math.min(maxHeight, minHeight) + "px"
            // display ten rows(@25px) 
            $("#bestFit").css("height", bestHeight);

No doubt one could get more sophisticated - find the row height etc but this works fine for me.

[imbalind]

This should be solved by PR #4852, sadly it's not passing tests now, but I'll leave it here as a reference.

[hernanortiz84]

I tried to set the height dynamically after the data is loaded using minRowsToShow and ngIf, here is the code: http://plnkr.co/edit/jRYeIt?p=preview.

It works fine except with FF on windows, any ideas?

[ganqqwerty]

+1 I think it's a basic functionality, seriously, who uses absolute height these days?

[sugir93]

i want to set the row height to auto, because i will get button for the row from an api, some time the buttons are over labbing and half of the buttons are not vissible..... ca anyone help me out for this problem???? thanx in advance :-)

[LuisPalomo]

Thanks for the hack @anhkind :)

[prathviraj080]

+1 @anhkind

[ramaseshulukka]

awesome hack @anhkind cheers man!!!

[vcfvct]

@anhkind Nice hack man! Thanks for sharing!

[vijayalaya]

@anhkind .. Thanks for the fix..It works for me :)

[mrichardsonjr]

The solution by @anhkind works, but it makes rendering take a long longer. Any way to alleviate this? There is a question on StackOverflow: http://stackoverflow.com/questions/40311664/angular-ui-grid-auto-height-if-rows-have-non-constant-height

[dman777]

How come minRowsToShow isn't in https://github.com/angular-ui/ui-grid/wiki/Configuration-Options?

[mportuga]

@dman777 The wiki is no longer the best place for getting information about the grid, since it is more inline with ng-grid. I would suggest going to our website for that information. http://ui-grid.info/docs/#/tutorial

[wuzhiji37]

@anhkind thank you !

[jamiegau]

+1, this should be an obvious target case of how to use the grid and have a simple config option to make it act this way. Its an obvious use case. I am amazed it still based on work around as discussed in the years of comments above...

[jamiegau]

Ad to this, I have been using the advice above but have issue I have not been able to get around apart from using ng-if. If I display the grid using the trick above, but then ADD or change the data array programmatically, I have not been able to get it to REDRAW and as such to RESIZE to the new height based on a different row count!! I have been using a $timeout where I set the data = []. which ng-if will then hide the grid, and using the $timeout, 500ms later set the data array and the minRowsToShow and virtualizationThreshold to match, this then redraws the grid to the right height. Otherwise, the grid keeps the previous height. (Tried looking at the API and forcing a redraw to no solution) This is similar to the error I have seen when hiding a grid before you want to show it.

Both quite stupendous bugs really. I am surprised at this late stage they are still around. Or are people moving onto react/angular2 and leaving ui-grid behind?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed because it has not had recent activity. If you believe that this is still an issue in the latest version, feel free to re-open it. Thank you for your contributions.

[mportuga]

Note: need help wanted label