This is a migrated thread and some comments may be shown as answers.
how dynamically size grid and pager to different resolutions?
1 Answer 47 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Top achievements
Rank 1
Gennady asked on 30 Nov 2011, 10:25 PM
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 (
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");
.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.

1 Answer, 1 is accepted

Sort by
Top achievements
Rank 1
answered on 02 Dec 2011, 05:53 PM
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(function () {
    var height = Math.floor(($(window).height() - 3));
    $('#Grid').height(height + 'px');
    $('.t-grid-content').height(height - 70 + 'px')
Asked by
Top achievements
Rank 1
Answers by
Top achievements
Rank 1
Share this question