[Solved] Setting any height cause poor grid resizing performance

[James Pearson]

I have a page with the following layout:

Header
RadMenu
RadToolbar
RadGrid
Footer

Header and footer are divs positioned with CSS.  RadMenu, RadToolbar, and RadGrid sit inside a content div size to fit between the header and footer with CSS rules.

Anytime I set a height for the RadGrid using its Height property, I see very poor rendering performance for the grid (in the 1-2 second range).  Grid column headers are set to remain static for vertical scrolling and scroll horizontally with horizontal scrolling.  The grid contains about 40 columns and 100 rows of data so both horizontal and vertical scroll bars are present.

If a remove any explicit height value, the grid renders very quickly, but it does not fill the content area between the toolbar and footer.  I assume the resizing is controlled with JavaScript.  Any suggestions for speeding this up without a hack?

[Dimo]

Hi James,

Please refer to the following help article and let us know if you have further questions:

http://www.telerik.com/help/aspnet-ajax/height-vs-scrollheight.html

If you prefer using Height, but want to avoid the visible flicker during vertical adjustment, then you can set style="visibility:hidden" to the RadGrid control and remove this style on the client by using the GridCreated client handler. In this way the control will become visible after all size adjustments have completed.

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[James Pearson]

The Height vs ScrollHeight article does not offer any suggestions for dealing with the performance of resizing the grid to fill the content area.  Essentially, the height should be adjusted as the viewport changes and the grid should fit between the RadToolbar and footer of page.

The original developer of the page I'm working on used a RadSplitter and placed the grid in a splitter pane and set the grid height to 100%.  This solution exhibits poor sizing performance (1-2 seconds) as does just setting the height of the grid without the splitter.

[Dimo]

Hello James,

You can set VisibleDuringInit="false" to the RadSplitter, so that the content is invisible during initial resizing and adjustments.

Generally, the performance in such scenarios depend on the number of splitter panes, the content inside them, as well as how the RadSplitter and RadPane dimensions are defined. Using percentages is slower, because more client-side calculations are executed. In such cases it is advisable to reduce the number of nested splitters.


Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[James Pearson]

I'm not using the RadSplitter.

Is there a method to suppress the generation of a height value on the rgDataDiv when no height is specified in the markup?  I want to control the height of this div with CSS.  Unfortunately, I see that RadGrid is emitting a height if I don't specify one.  This interferes with the height I set with CSS.

[Dimo]

Hi James Pearson,

In order to suppress height calculation for the data area, do not set Height to the RadGrid. This will make the RadGrid control apply its ScrollHeight property value, which has a default value of 300px.

In order to control the data area's height with external CSS (override ScrollHeight), use !important :

.rgDataDiv
{
         height: 345px !important;
}

Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[James Pearson]

I was able to solve the resize performance issue by not assigning a value for Height or ScrollHeight directly on the RadGrid control and then creating the following CSS rules to set the height of the RadGrid data div:

.rgDataDiv{
position: absolute;
top: 8em !important;
bottom: 0 !important;
height: auto !important;
}

Per Dimo, RadGrid will assign a default ScrollHeight if no specific height or scroll height is assigned to the control.  I used the height: auto !important to allow the CSS to override the height being set by the control (which is emitted in the style attribute by the RadGrid).  The auto then allowed the height to be calculated based on the top and bottom position values, making height dynamic as I originally outlined.  I have tested this with IE7 and FF3.  I have also tested to ensure it maintains the correct position and size with text resizing and zoom.

The result is that the grid height now resizes with viewport changes, without JavaScript, and is much faster in IE.  This makes grid populate feel much more responsive.  Of course, my solution is somewhat specific to the layout of my page, but hopefully the technique will be helpful to someone else trying to achieve a dynamic height that performs well in all browsers.

Thanks to Dimo for the tip on overriding the height being emitted by the control.