how dynamically size grid and pager to different resolutions?

[Gennady]

I need the grid height to work well on different resolutions like 1024x768 and 1600x1200. I also want to always display the pager at the bottom.

Say I set the pager pageSize to 20. In my case when resolution is 1024x768 it can only show 8 items. So when I implemented your suggestion of .Scrollable(c => c.Enabled(true).Height(300)) (I tried using %) it makes it it possible to see remaining items but not until you scroll all the way down do you see the pager control which isn't what I'm going for.

This is obviously not uncommon for folks wanting out of the grid. Ideally, the grid should have intelligence and adjust the height and pageSize dynamically.

I looked at modifying the height and pageSize myself client side, but there doesn't appear to be a pageSize client api that it reacts to and then how to force the grid to update to the new pageSize value.

Anyone know how to solve this? Does Telerik have a solution for this?

I found someone trying to do the same with this code but doesn't seem to work (http://stackoverflow.com/questions/5433618/automatic-paging-based-on-content-area-resolution-telerik-grid)

function onLoad(e)
    {
       //Gets the height of the Window. ($(window).height())
       //Subracts the height of any menus/headers/footers (in this case 275)
       //Then divide by our "magic number" which you will need to tinker with
       //to determine how the grid looks in different browsers. (in this case 28)

       var height = Math.floor(($(window).height()-275)/28);
       var grid = $("#YourGrid").data("tGrid");
       grid.pageSize = height;
    }   

Formula :

$(window).height() - [Occupied Space] / [Magic Number]

[Occupied Space] - Total CSS Height of all objects above the Grid.

[Magic Number]   - You will have to play with this one and try it out on 
                   different browsers until you get the expected results.

[Gennady]

Telerik - can you add support to client side to modify the pager's pageSize and allow to update the grid to retrieve more/less rows based on the new pageSize?

Part of the issue I solved by using this Javascript to resize the height of the grid based on window height. But there does not appear any way to set client side the pageSize and have the grid reload to show less / more rows (depending on pageSize setting).

I first set the grid's Scrollable property to a preset height: .Scrollable(c => c.Enabled(true).Height(400))
Then I set the pager.PageSize to something that works in our lowest resolution of 1024x768 (it's this that I would like to modify client side): .Pageable(pager => pager.PageSize(9))

And then client side on document ready and resize I adjust for the different heights:

$(document).ready(function () {
    $(window).resize();

});

$(window).resize(function () {
    var height = Math.floor(($(window).height() - 3));
    $('#Grid').height(height + 'px');
    $('.t-grid-content').height(height - 70 + 'px')
});