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.

[c0bra]

In 3.0 you can set the minRowsToShow property and the grid will automatically resize itself to display that number of row, assuming the element itself has no defined height.

An add-on feature that just resizes the grid to show all of its rows and not would be very fairly easy, and has been requested a couple times, but there's doesn't seem to be anyone interested in actually putting in the time to develop it. It will probably get done once higher priority items get checked off.

[joshmackey]

Yes but minRowsToShow can only be set once and you get a lot of empty whitespace if you don't actually have that many rows.

I already wrote a resizer based on the number of rows but it just seems highly inefficient.

[c0bra]

If the number of rows keeps changing and you want the grid to adjust for
that, how would you get away from having to resize the element every time?
On Oct 6, 2014 5:23 PM, "Josh Mackey" notifications@github.com wrote:

Yes but minRowsToShow can only be set once and you get a lot of empty
whitespace if you don't actually have that many rows.

I already wrote a resizer based on the number of rows but it just seems
highly inefficient.

—
Reply to this email directly or view it on GitHub
#1735 (comment).

[joshmackey]

Well, as long as a specific height isn't set, the element should just keep growing. The problem is that it keeps growing into a specific height container, thus scrollbars.

[PaulL1]

I think the only way to do this would be to have a resizer based on the number of rows - there's no other way to know how large the grid should be made.

There could be value in having this part of the grid, in that the grid already knows how high rows are. I'd imagine it would need to do something like:

• notice the data has changed (it's doing this anyway probably)
• notice that the number of rows to show is set to "all" or some such value
• calculate how many rows "all" now is, and therefore how high the grid now is
• set the grid height to that value

Presumably the containing element would automatically grow if this were done.

I think this is plausible, but I wouldn't underestimate how much work it is.

[mburbea]

I have a similar issue. I have filterable data with a functional footer, and this leads to nasty whitespace when the search is used and reduces the size to less than the container. Ideally the grid should respect a min-height and max-height attribute and scroll when needed. And what would be nice is simply to paint filler rows (e.g. just keep zerbra striping) when there is no data. I wouldn't mind having 5 rows added if the filtered set is less than the min-height.

[Manduro]

@joshmackey Would you mind sharing your code for doing this?

[joshmackey]

@Manduro

Its quite crude but here you are.

This gets called whenever the rows in the grid change.

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

And this is on the div ui-grid-auto-resize ng-style="{ 'height': height }"

I basically just resize the container based on the number of rows (plus the header) and allow auto-resize to handle the rest.

[BrodaUa]

Hi guys, I have a similar problem. I wanna set the height of my grid so it would be display all my rows, and I use the next code:
$scope.gridOptions.minRowsToShow = $scope.gridOptions.data.length ;
where 'data' is my array of objects that are displayed.
But ~data.length does not return the amount of my objects, is there are something wrong in my code? Or I can`t do that?

[PaulL1]

It depends on how you're doing it. If you are retrieving the data via http, then likely gridOptions.data.length is zero at the time the code runs. If you are setting gridOptions.data = 'data';, then you actually need to use $scope.data.length. I'd need to see more of your code to be sure, but the easy way is to set a breakpoint at the time that this code runs, and check what's in gridOptions.data at that point in time.

[BrodaUa]

Here code of my controller:
app.controller('SimpleController', ['$scope', '$http', function ($scope, $http) {

$scope.gridOptions = { enableRowHeaderSelection: false };

$scope.gridOptions.columnDefs = [
   { name: 'id' },
   { name: 'name' },
   { name: 'age' },
   { name: 'address.city' },
   { name: 'gender' }
];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
    .success(function (data) {
        $scope.gridOptions.data = data;
    });
$scope.gridOptions.minRowsToShow = $scope.gridOptions.data.length;
$scope.gridOptions.enableHorizontalScrollbar = false;
$scope.gridOptions.enableVerticalScrollbar = false;

}]);
But I still can`t get the data.length :(

[PaulL1]

The data has no length until the $http promise resolves. You could move the minRows into the http response, but that may be too late.

Sent from my iPhone

On 25 Nov 2014, at 9:21 pm, BrodaUa notifications@github.com wrote:

Here code of my controller:
app.controller('SimpleController', ['$scope', '$http', function ($scope, $http) {

$scope.gridOptions = { enableRowHeaderSelection: false };

$scope.gridOptions.columnDefs = [
{ name: 'id' },
{ name: 'name' },
{ name: 'age' },
{ name: 'address.city' },
{ name: 'gender' }
];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function (data) {
$scope.gridOptions.data = data;
});
$scope.gridOptions.minRowsToShow = $scope.gridOptions.data.length;
$scope.gridOptions.enableHorizontalScrollbar = false;
$scope.gridOptions.enableVerticalScrollbar = false;
}]);
But I still can`t get the data.length :(

—
Reply to this email directly or view it on GitHub.

[BrodaUa]

If I try to do something like that:
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function (data) {
$scope.gridOptions.minRowsToShow = data.length; //or after grid.Options=data
$scope.gridOptions.data = data;
// $scope.gridOptions.minRowsToShow = data.length;
});
then it runs like if I didn`t write this : " $scope.gridOptions.minRowsToShow = data.length; ". The length stay by default - 10 rows.