This is a migrated thread and some comments may be shown as answers.

Dynamic Scroll Height up to Max Height

1 Answer 98 Views
Grid
This is a migrated thread and some comments may be shown as answers.
License
Top achievements
Rank 1
License asked on 22 Nov 2013, 06:28 PM
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?

1 Answer, 1 is accepted

Sort by
0
Venelin
Telerik team
answered on 27 Nov 2013, 09:33 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Grid
Asked by
License
Top achievements
Rank 1
Answers by
Venelin
Telerik team
Share this question
or