Dynamic Scroll Height up to Max Height

[License]

So I have Grids throughout my site that have static headers and footer. Currently, the heights are all hard-coded depending on the other content on the particular page. The problem is that in certain instances a grid may only be populated with a handful of records but the footer is staying static at the bottom of the page, leaving a huge space between the last record and the totals.

I can allow the grid do auto size the height but then I will lose the scrolling that I want at a certain height. How can I make the footer sticky to the last row unless it exceeds a specified height?

[Venelin]

Hi Robert,

You can achieve the desired functionality by following the below approach.
1. Subscribe to the OnGridCreated event (or some other event that is convenient to your case)

ASPX:

<ClientEvents OnGridCreated="onGridCreated" />

2. Define the event handler for the OnGridCreated event. It will handle the case with many records.

JavaScript:

function onGridCreated(sender, args) {
    if(sender.get_element().offsetHeight > 500){
        sender.GridDataDiv.style.height = "500px";
        sender.repaint();
    }
}

This function simply verifies if the grid height exceeds 500px. If so, fix the height to 500px and repaint the grid using the .repaint() method. Don't forget it, otherwise you will end up with a header misalignment.

3. Add this setting too.

<Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight=""/>

Here the ScrollHeight is set to an empty string. The effect of this setting is that grid will expand by height in order to accommodate all data items. This handles the case with fewer records.

I hope this helps.
 
Regards,
Venelin
Telerik