RadGrid Width="100%" problem in a table

[Jay]

It seems that the RadGrid has a problem with using a Width of 100% when placed inside a table. It used to work in RadControls ASP.NET. Here is a sample that shows the top of the browser using a 100% width grid in a <TABLE>, and the bottom of the browser shows a 100% width grid without a table. The bottom one sizes correctly when the browser is resized. When first loaded it appears OK, but when resized the right side of the grid continues to move to the right off the page. I am using XP SP 2 w/ IE 7 latest service packs. Note that I am simply binding to the nwind database.

<%

@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<!

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 id="Head1" runat="server">

<title>Untitled Page</title>

<style type="text/css">

html, body, form { width:100%; height:100%; overflow:hidden; margin:0; padding:0}

</style>

</

head>

<

body>

<form id="form1" runat="server">

<

asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<

table width="100%" height="50%" border="0" cellpadding="0" cellspacing="0">

<

tr width="100%" height="100%"><td width="100%" height="100%">

<

telerik:RadGrid

ID="RadGrid1" runat="server" DataSourceID="AccessDataSource1"

GridLines="None" Skin="Office2007" Height="100%" Width="100%">

<MasterTableView TableLayout="Fixed" />

<ClientSettings>

<Scrolling AllowScroll="True" UseStaticHeaders="True" />

</ClientSettings>

</

telerik:RadGrid>

</

td></tr></table>

<

telerik:RadGrid

ID="RadGrid2" runat="server" DataSourceID="AccessDataSource1"

GridLines="None" Skin="Office2007" Height="50%" Width="100%">

<MasterTableView TableLayout="Fixed" />

<ClientSettings>

<Scrolling AllowScroll="True" UseStaticHeaders="True" />

</ClientSettings>

</

telerik:RadGrid>

 

<asp:AccessDataSource ID="AccessDataSource1" DataFile="~/App_Data/Nwind.mdb"

SelectCommand="SELECT CustomerID, CompanyName, ContactName, ContactTitle, Address, PostalCode FROM Customers"

runat="server" />

</form>

</

body>

</

html>

[Konstantin Petkov]

Hello Jay,

You should set fixed layout to the table itself:

<table width="100%" height="50%" border="0" cellpadding="0" cellspacing="0" style="table-layout: fixed;">

This resolve the problem to me. Let me know if you need further assistance.

Greetings,
Konstantin Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Jay]

That works great thanks.

How would I set the height of the telerik:RadGrid using Javascript (like in the OnGridCreated event).

Thanks!

[Konstantin Petkov]

Hi Jay,

Please, review the code from this thread for example. I hope you will find it useful.

Regards,
Konstantin Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Jay]

That article is for ASP.NET Radcontrols ... do you have one for Prometheus? Don't the Javascript APIs change in Prometheus?
Thanks!
Jay

[Konstantin Petkov]

Hi Jay,

Please, refer to "migration" help article in Prometheus documentation here (6) Client-side API changes) which explains how the client-side code should be changed.

I hope this helps!

Greetings,
Konstantin Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center