Hi,
We are experiencing a problem with the RadGrid. This happens when the width of the grid is larger than the browser window. The right border does not appear at the right edge of the grid but rather at the right side of the browser window.
I have attached images which shows the issue. I have a project that demonstrates this but can't seem to attach a zip file.
Here is the aspx,
Here is the code to populate the grid,
I seem to be able to get around this on our real site by using a custom skin and any font other than vedana but this is obviously not ideal as it is inconsistant with our website's theme.
Regards
ADe
We are experiencing a problem with the RadGrid. This happens when the width of the grid is larger than the browser window. The right border does not appear at the right edge of the grid but rather at the right side of the browser window.
I have attached images which shows the issue. I have a project that demonstrates this but can't seem to attach a zip file.
Here is the aspx,
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> <!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"> <title></title> </head> <body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <div> <telerik:RadGrid ID="RadGrid1" runat="server"> <MasterTableView> <RowIndicatorColumn> <HeaderStyle Width="20px"></HeaderStyle> </RowIndicatorColumn> <ExpandCollapseColumn> <HeaderStyle Width="20px"></HeaderStyle> </ExpandCollapseColumn> </MasterTableView> </telerik:RadGrid> </div> </form> </body> </html> Here is the code to populate the grid,
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { DataTable dt = new DataTable(); for (int i=1; i<=20; i++) { dt.Columns.Add("Column" + i); } for (int i = 1; i <= 10; i++) { DataRow r = dt.NewRow(); for (int j = 0; j <= 19; j++) { r[j] = "Value"; } dt.Rows.Add(r); } RadGrid1.DataSource = dt; RadGrid1.DataBind(); } } I seem to be able to get around this on our real site by using a custom skin and any font other than vedana but this is obviously not ideal as it is inconsistant with our website's theme.
Regards
ADe
1 Answer, 1 is accepted
0
Hello ADe,
The RadGrid control is a <div> element with a <table> element inside. <div>s are by defautl 100% wide and do not expand to enclose their content, while tables do expand. So the observed behavior is expected.
This issue is fixed in the latest official version of RadControls with some Javascript, so you can upgrade to avoid it.
Alternatively, you can use on of the following workarounds:
1) set a large-enough pixel width to the RadGrid control - this is the workaround we are using internally, if we detect that the MasterTableView is wider than the control's wrapper
2) remove the outer RadGrid border with <telerik:RadGrid style="border:0" />
3) float the RadGrid control and clear the float after it with:
<telerik:RadGrid style="float:left" />
<div style="clear:both"><!-- --></div>
(floated elements expand as much as necessary to enclose their content)
Best wishes,
Dimo
the Telerik team
The RadGrid control is a <div> element with a <table> element inside. <div>s are by defautl 100% wide and do not expand to enclose their content, while tables do expand. So the observed behavior is expected.
This issue is fixed in the latest official version of RadControls with some Javascript, so you can upgrade to avoid it.
Alternatively, you can use on of the following workarounds:
1) set a large-enough pixel width to the RadGrid control - this is the workaround we are using internally, if we detect that the MasterTableView is wider than the control's wrapper
2) remove the outer RadGrid border with <telerik:RadGrid style="border:0" />
3) float the RadGrid control and clear the float after it with:
<telerik:RadGrid style="float:left" />
<div style="clear:both"><!-- --></div>
(floated elements expand as much as necessary to enclose their content)
Best wishes,
Dimo
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items