Grid control and vertical size?

[Kendall Bennett]

Is there any easy way to determine how much room is available for a grid control on a page (ie: how much visible area can be used for the grid), so that the vertical size of the grid control can be adjusted automatically to fill the available space? So if the browser window is tall vertically, the grid can show more data, but if the browser window is small vertically, it will show less data?

The intent here is to have a grid control on the page such that it can expand and contract to fill the available space based on how big the users browser window is, and not have to be set to a standard size, which may end up going below the fold for some users and require the user to scroll the window.

I know that kind of stuff is easy in WinForms, WPF and SilverLight, but I have no idea if I can do this with a grid control (if so, that is what I want!).

[Kendall Bennett]

No suggestions here?

[Andrew]

Hi Kendall,

It depends on what exactly you're trying to achieve.

If you want to adjust grid height so that it always fits browser window, you could simply use the following javascript:

<script type="text/javascript">
    $(function () {
        $(window).resize(function () {
            $('.t-grid-content', $('#Grid')).css('height', $(window).height() - 400 /* << adjust */);
        }).trigger('resize');
    });
</script>

In code above, Grid is the name of your grid (html id attribute), and the the value of 400 must be adjusted depending on grid position on the page, grid header height, etc, etc. Just try to tweak the value but I hope you get the idea.

Do not forget to add .Scrollable() to the grid.

But bear in mind that the code above allows you to change grid height as browser height changes. So, if the grid height becomes too small, grid's vertical scrollbar will of course appear.

If you want to set the grid so that it shows more or less rows per page depending on the grid height - this is not possible, as far as I know.

[Kendall Bennett]

Right, so the code you proposed will allow me to change the height of the grid control to be a fixed size compared to the browser window. But the area inside the grid would need to be scrollable, which would defeat the purpose.

So yes, what I would like to do is have the number of rows displayed in the grid change depending on the height of the browser window (and if the browser window is too small and we got below a certain size to just cap it and let the user scroll the window). This is easy enough to do with WinForms, as you can simply compute the area available to the grid when the window resizes, and then determine how many rows you could display in that area and set the grid's row displayable rows (or page size) to that value.

So to do this with the MVC grid control, we would need a way to be able to set the displayable rows from Javascript I suppose?

Maybe the best compromise is to simply let the user decide how many rows to display on the page as a customizable attribute, and they can adjust it to best fit their browser window. Not perfect, but I suppose it would work.