[Solved] How to style height as a percentage

[Bob]

I need to style the MVC grid so that it takes up 100% of the vertical height available to it, and show a scroll bar if needed. 

I am using PageOnScroll and it seems to set the height based on the page size. 

Scrollable.height seems to only allow a pixel setting. It says "string".. what would the string be? A class name?

Is it possible to get what I am looking for? Any advice, or will I have to write jQuery to size it dynamically?

Thanks,
BOb

[Dimo]

Hi Bob,

This behavior is not supported out-of-the-box, but you can achieve it manually. In the Grid's OnLoad client event you need to do the following:

1. Remove the Grid's outer border, the one applied to the div.t-grid element.
2. Obtain the available vertical space for the Grid, e.g. see how large is its parent element - "A"
3. Obtain the height of the Grid's pager, header, grouping header, etc. - "B"
4. Set "A - B" to the Grid's scrollable data area, namely div.t-grid-content.

Points 2-4 need to be executed on window resize as well, if needed.

All the best,
Dimo
the Telerik team

[Bob]

Thanks... that seems to work, but I have one small problem. 

If the grid happens to size and be larger than the record set of PageOnScroll, the scroll bar doesn't appear so there is no way for the user to load more records. 

Also, I have created a generic method to call from my grid to resize them. But, what if I want to something specific in the onload of 1 grid. Can you specify more than one OnLoad function?

BOb

[Dimo]

Hi Bob,

With regard to the scrollbar problem, you can increase the page size server-side to make sure that a scrollbar is always needed, regardless of the Grid height. Alternatively, if you are using Ajax binding only, you can check the Grid height in its OnLoad event handler and change the pageSize on the fly if needed:

function gridOnLoad(e) {
    var gridElement = $(this),
        rowHeight = gridElement.find(".t-no-data").height(),
        dataAreaHeight = gridElement.find(".t-grid-content").height(),
        grid = gridElement.data("tGrid");

    if (grid.pageSize * rowHeight < dataAreaHeight) {
        grid.pageSize = parseInt(dataAreaHeight / rowHeight, 10) + 10;
    }
}

I am afraid you can't specify more than one OnLoad handler.

Greetings,
Dimo
the Telerik team