Grid resizing on bind

[Andrew Short]

I have recently upgraded a RadGrid from the ASP.NET version to the latest ASP.NET AJAX version.  I am running into some problems with sizing.  When the grid first loads, you can see the data and the grid looks normal for about a second.  Then, the grid 'gets squished', and I can only see half of the first row.  I am able to resize the grid with javascript to make it look normal, but then it has a flicker effect, and it looks even worse with the more records that are loaded. Below is my grid declaration and related javascript code.  I need for the grid to maintain its height when the page loads.  Does anyone know why it might be doing this?

 

<telerik:RadGrid ID="dgHistory" runat="server"

 

 

Skin="Office2007"

 

 

Height="100%"

 

 

Width="100%"

 

 

EnableViewState="false"

 

 

AutoGenerateColumns="False" >

 

 

<MasterTableView AllowSorting="true" AllowNaturalSort="true" EnableViewState="false" TableLayout="Auto" >

 

 

<HeaderStyle Width="100%" />

 

 

<ItemStyle Font-Size="X-Small" Font-Names="Arial" HorizontalAlign="Left" Wrap="True" BackColor="ActiveCaptionText" />

 

 

<AlternatingItemStyle Font-Size="X-Small" Font-Names="Arial" HorizontalAlign="Left" Wrap="True" BackColor="Control" />

 

 

</MasterTableView>

 

 

<HeaderStyle Wrap="false" />

 

 

<ClientSettings>

 

 

<Selecting AllowRowSelect="true" />

 

 

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

 

 

<ClientEvents OnRowSelected="RowSelected" />

 

 

<Resizing EnableRealTimeResize="false" ResizeGridOnColumnResize="False" />

 

 

</ClientSettings>

 

 

<GroupingSettings CaseSensitive="false" />

 

 

</telerik:RadGrid>

 

 

function Resize() {

 

 

 

 

 

var scrollArea = document.getElementById("<%= dgHistory.ClientID %>" + "_GridData");

 

 

if(scrollArea){

 

setTimeout(

function(){

 

 

var header = document.getElementById("<%= dgHistory.ClientID %>" + "_GridHeader");

 

scrollArea.style.height = document.body.offsetHeight - (header.offsetHeight * 3.5) +

"px";

 

scrollArea.style.height = document.body.offsetHeight - header.offsetHeight - 32 +

"px";

 

}, 200);

}

 

 

 

}

[Sebastian]

Hello Andrew,

How to set 100% Height/Width for your RadGrid for ASP.NET AJAX and resize the grid when its container is resized you can see from the sample project in the following code library entry:

http://www.telerik.com/community/code-library/submission/b311D-keegm.aspx

Please use the approach from this article and let us know how it goes.

Kind regards,

Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.