dynamically resize grids

[Archelyst]

I want a grid to have a height relative to the window. For that I wrote a little directive which works in principle. When I resize the browser, the grid height changes smoothly.

The problem is the initial rendering without resizing the browser: the grid is resized correctly, but the ui-grid-render-container is not.

I've prepared a plunk demonstrating my issue: http://plnkr.co/edit/1XJY8wlamohk25yec5Sm?p=preview (In defense, the directive and HTML structure are a little simplified, but the effect is the same. The ng-if="1" simulates ui-views.)

There are two "switches" which affect the behavior: The $timeout in the directive and the ng-if="1" on the div surrounding the grid. The following happens:

Without ng-if="1" and without $timeout everything works fine.
Without ng-if="1" and with $timeout the grid resized, but not the render-container.
With ng-if="1" and without $timeout nothing is resized.
With ng-if="1" and with $timeout the grid resized, but not the render-container.

Sadly, I cannot get rid of ng-if="1" or rather its equivalent ui-view.

Is there anything in the directive/structure I can do to solve this or can this be fixed inside ui-grid? It seems strange that the grid and rendering container can be of different size.

[PaulL1]

This looks to work quite well - so would probably be useful for other people.

The standard answer to sizing issues on initial rendering is to call handleWindowResize(). Refer: http://plnkr.co/edit/FsVsjGn883eUMnrMjewX?p=preview.

It'd be nice to have this cleaned up into a feature if possible - perhaps added to the auto-resize feature?

[Archelyst]

Thank you so much, works nicely.

How do you envision to integrate that into ng-grid? Having a directive that takes a reference selector and some calculation and than sets the height of the grid according to that? That would basically be the opposite direction of what I did (setting a directive on a reference element and adjusting the grid's height according to that).

[stale]

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]

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: add good first issue label

[titanProgram]

I have found a temporary solution for my implementation of the ui-grid

// Puts the correct numbers into the counter column.
scope.gridApi.core.on.rowsRendered(scope, function(gridAPI) {
    // Show counter numbers.
    var visibleRows = scope.gridApi.core.getVisibleRows(gridApi.grid);
    visibleRows.forEach(function(row, index) {
        // This uses the currently-selected page size and page number to show the correct counter numbers.
        row.entity.counter = (index + 1) + ((scope.pageNumber - 1) * scope.pageSize);
    }); // end forEach()
    // scope.gridApi.grid.gridHeight = (visibleRows.length * 30) + 60;
    scope.setHeight(visibleRows.length);
}); // end rowsRendered()

scope.setHeight = function (rowNum) {
    let tags = document.getElementsByClassName('ui-grid-viewport');
    let uiGridHeight = scope.gridApi.grid.gridHeight = (rowNum * 30);
    for (let i = 0; i < tags.length; i++) {
        tags[i].style.height = uiGridHeight + 'px';
    }
}

Every time data in the ui-grid changes I update the css height for the ui-grid-viewport class to (number of rows * 30)

note*
you can add an extra few pixels to accommodate for the extra height taken up by a scroll bar at the bottom of the ui-grid
e.g. let uiGridHeight = scope.gridApi.grid.gridHeight = (rowNum * 30) + 15;

I found adding an extra 15 pixels works nicely with chome and firefox scroll bars

Any update on an official solution to this issue?