I´m using a radgrid with 100% height and it works fine with Internet Explorer but I can not get it work with Chrome, where it seems to have 1% height, instead of 100%, so my grid is not visible.
This was working for me with Chrome and radcontrols for asp.net version, but now with rad controls for asp.net ajax and Chrome, it does not work,
Here is some parts of my code, I know I have to put height=100% to all the parent tags:
Can you help me, please.
<
body style="height:100%;margin:0px;padding:0;" scroll="no">
<form id="form1" enctype="multipart/form-data" runat="server" style="height:100%"
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Panel ID="pnlExterior" runat="server" Width="100%" Height="100%" DefaultButton="ibtEnter">
<
telerik:RadCodeBlock ID="radcodigo" runat="server">
...
</telerik:RadCodeBlock>
<
telerik:RadSplitter ID="radsplitPagina" runat="server" Width="100%" Height="100%" Skin="Outlook" Orientation="horizontal" OnClientLoaded="FocoSplitterLoad">
<telerik:RadPane ID="radpanArriba" runat="server" Width="100%" Height="116px" Scrolling="None" CssClass="CeldaFondoClara">
...
</
telerik:RadPane>
<telerik:RadPane ID="radpanPagina" runat="server" Width="100%" Height="100%" Scrolling="None" CssClass="PosicionRelativa">
<table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
...
</table>
<table style="width:100%;height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" style="width:100%;height:100%">
<
telerik:RadGrid ID="gvw1" runat="server" AllowPaging="True" PageSize="25" Width="99.5%" Height="99%"
AllowSorting="True" AutoGenerateColumns="False" DataSourceID="odsClientes" GridLines="Horizontal" Skin="Yunke" EnableEmbeddedSkins="false"
OnItemDataBound="gvw1_ItemDataBound" OnSelectedIndexChanged="gvw1_SelectedIndexChanged">
...
<MasterTableView DataSourceID="odsClientes" DataKeyNames="intIDCodigoCliente_fl" Width="100%" TableLayout="Fixed"">
...
</
telerik:RadGrid>
</td>
</tr>
</table>
</telerik:RadPane>
</
telerik:RadSplitter>
Thanks for your time,
Daniel.
7 Answers, 1 is accepted
Here are two examples, which contain a 100% high RadGrid. Please compare with your implementation and make the necessary corrections.
http://www.telerik.com/community/code-library/aspnet-ajax/grid/setting-100-height-and-resize-on-container-resize-for-grid-with-scrolling-and-static-headers.aspx
http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx
Here is one more example:
<%@ Page Language="C#" %> |
<%@ Import Namespace="System.Data" %> |
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
<script runat="server"> |
protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) |
{ |
DataTable dt = new DataTable(); |
DataRow dr; |
int colsNum = 4; |
int rowsNum = 40; |
string colName = "Column"; |
for (int j = 1; j <= colsNum; j++) |
{ |
dt.Columns.Add(String.Format("{0}{1}", colName, j)); |
} |
for (int i = 1; i <= rowsNum; i++) |
{ |
dr = dt.NewRow(); |
for (int k = 1; k <= colsNum; k++) |
{ |
dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i); |
} |
dt.Rows.Add(dr); |
} |
(sender as RadGrid).DataSource = dt; |
} |
</script> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
<html xmlns="http://www.w3.org/1999/xhtml"> |
<head runat="server"> |
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
<title>RadControls for ASP.NET AJAX</title> |
<style type="text/css"> |
html |
{ |
overflow:hidden; |
} |
html,body,form |
{ |
margin:0; |
padding:0; |
height:100%; |
} |
</style> |
</head> |
<body> |
<form id="form1" runat="server"> |
<asp:ScriptManager ID="ScriptManager1" runat="server" /> |
<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" Orientation="Horizontal"> |
<telerik:RadPane ID="RadPane1" runat="server" Height="100px"> |
top pane - 100px high |
</telerik:RadPane> |
<telerik:RadPane ID="RadPane2" runat="server"> |
<table style="width:100%;height:100%" border="0" cellspacing="0" cellpadding="0"> |
<tr> |
<td style="height:100%"> |
<telerik:RadGrid |
ID="RadGrid1" |
runat="server" |
Height="100%" |
style="border:0;outline:none" |
OnNeedDataSource="RadGrid_NeedDataSource"> |
<ClientSettings> |
<Scrolling AllowScroll="true" UseStaticHeaders="true" /> |
</ClientSettings> |
</telerik:RadGrid> |
</td> |
</tr> |
</table> |
</telerik:RadPane> |
</telerik:RadSplitter> |
</form> |
</body> |
</html> |
All the best,
Dimo
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.

I have been several days with this with no results. I tried the code you told me but I could not make it.
I have submitted the support ticket: 214834 to see if you can do me a favor to look at the project.
thanks a lot,
Daniel.
Thank you for the sample project. The problem is caused by missing height style for the update panel <div>, which is generated around RadGrid. Please refer to the following example, which shows how to get the update panel's client ID by using the AjaxSettingCreated event and add a 100% height CSS style:
http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx
Here is an excerpt from the above example ( DefaultCS.aspx )
C#
public string RadGrid1PanelClientID; |
protected void RadAjaxManager1_AjaxSettingCreated(object sender, AjaxSettingCreatedEventArgs e) |
{ |
if (e.Initiator.ID == "RadGrid1") |
{ |
this.RadGrid1PanelClientID = e.UpdatePanel.ClientID; |
} |
} |
CSS (must be in the <head> of the page)
#<%= RadGrid1PanelClientID %> |
{ |
margin:0; |
height:100%; |
} |
Regards,
Dimo
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.

Since this thread is older, are there any updates as to if this issue is going to be resolved within the RadAjaxManager, as the suggested solution seems to be somewhat of a work-around. I believe that the RadAjaxManager should respect the specified attributes (width/height) of the wrapped controls & not impose any unsuspected side-effects. Couldn't the RadAjaxManager simply check to see if the wrapped controls have width/height/etc specified and implicitly take on those attributes itself (via the generated wrapping div)?
--Joe.
This has been implemented in RadControls Q2 2010 (2010.2.713) - you should set the update panel height manually though, as the RadAjaxManager cannot guess all possible scenarios, and moreover, the updated control's height might be set on the client.
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" UpdatePanelHeight="100%" />
</UpdatedControls>
Regards,
Dimo
the Telerik team

I recently upgraded my telerik rad controls . My project was running successfully in Ie7,Ie 8, But not in Ie9, Ie10 and chrome.Buttons and drop down list are not working properly. Please Let me know How to make work in Chorme and New versions of Ie10. I am using the latest rad controls Q3 2012.
Thanks in Advance,
Prashanth.
I am afraid the issue you are facing is not replicable on our side. Could you please give us more details on what you are trying to achieve or possibly a small running project that we can use to reproduce the case.
Alternatively a live URL will help us as well.
All the best,
Galin
the Telerik team