[Solved] Grid Resize issue

[Mridul]

Hi, 

I am using Telerik MVC Grid to display my data details, i need scroll height should adjust according to browser height. 

[Kenneth Mazur]

Did you ever get anywhere with this?  I'm having same issue.

[Mridul]

Hi Kenneth,
 
Yes, i had resolved it last year.

Steps to follow:
1. Set some minimum height for your Grid (eg. .Scrollable(scrolling => scrolling.Height(380)))
2. Set height for Grid dynamically as per window dimensions : 

 

function doResize() {
    var _height = $(window).height();
    _height = _height - 145;
    $("#Grid .t-grid-content").height(_height);
}

3. Call this function in ready function.

$(document).ready(function (e) {
    doResize();
});

4. Make it more impressive and call it on onresize event

 

window.onresize = doResize;

Hope it will help. Enjoy programming :-) 


Regards
Mridul Sharma
Sr. Software Engineer

 

[Jim]

Hi Mridul -

I am using your suggested approach but while this resizes the grid it doesn't increase the number of rows in the scrollable area.  Is this working for you? 

[Jim]

I figured out a solution.

There are two issue; first is changing the size of the grid, second is changing the number of rows ( pagesize ) of that grid.

The following code does the trick for me although i need to cause a refresh when the number of rows on the page changes.

function onWindowResize() {
    var height = $(window).height() - 250;

    $('#Grid .t-grid-content').height(height);
    var grid = $('#Grid').data('tGrid');
    if (grid != undefined) {
        grid.pageSize = Math.floor(height / 32);
    }
}

Make sure that your onWindowResize executes after the jQuery.Ready function for the telerik scripts that are injected onto your page ( with script registrar ).