This is a migrated thread and some comments may be shown as answers.

RadGrid DateTime Columns messed up in Safari 5.1

2 Answers 79 Views

Grid

This is a migrated thread and some comments may be shown as answers.

chrbra asked on 23 Aug 2011, 07:40 PM

Hello,

I have a problem with RadGrid's DateTime Columns when the Page using the Grid is displayed in Safari 5.1 (and presumably also other versions of Safari). The Columns are several thousand pixels long.

I am using 2011 Q2 controls for ASP.NET.

I have set up a demonstration page, which includes basically the same Grid as my real web application does, and the error is present there aswell: http://paeppi.com/RadControlsWebApp2/Default.aspx

In Safari, this example looks like this: Screenshot

As you can see, there are basically no custom css styles on the page that might mess up the Grid.

The aspx source is:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadControlsWebApp2.Default" %>

<!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>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body>

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

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<div>

<telerik:RadGrid ID="RadGrid1" ShowGroupPanel="true" AllowFilteringByColumn="true"

ShowStatusBar="True" runat="server" AllowPaging="True" AllowSorting="true"

AllowCustomPaging="True" VirtualItemCount="100000" PageSize="25" Height="752px">

<ClientSettings AllowDragToGroup="true" />

<MasterTableView>

<CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

</ExpandCollapseColumn>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>

</EditFormSettings>

<PagerStyle AlwaysVisible="True" FirstPageToolTip="Erste Seite" LastPageToolTip="Letzte Seite" NextPagesToolTip="Weitere Seiten" NextPageToolTip="Nächste Seite" PagerTextFormat="Seite wechseln: {4}  Seite <strong>{0}</strong> von <strong>{1}</strong>, items <strong>{2}</strong> to <strong>{3}</strong> of <strong>{5}</strong>." PageSizeLabelText="Anzahl je Seite:" PrevPagesToolTip="Vorige Seiten" PrevPageToolTip="Vorige Seite" />

</MasterTableView>

<PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="True" BorderStyle="None" FirstPageToolTip="Erste Seite" PagerTextFormat="Zu Seite: {4}  Seite <strong>{0}</strong> von <strong>{1}</strong>, items <strong>{2}</strong> to <strong>{3}</strong> of <strong>{5}</strong>." PageSizeLabelText="Anzahl je Seite:" VerticalAlign="Bottom"></PagerStyle>

<FilterMenu EnableImageSprites="False"></FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

The codebehind is:

namespace RadControlsWebApp2

{

public partial class Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

RadGrid1.NeedDataSource += new GridNeedDataSourceEventHandler(RadGrid1_NeedDataSource);

}

void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

using (govistasigsDataContext db = new govistasigsDataContext())

{

RadGrid1.VirtualItemCount = db.Users.Count();

RadGrid1.DataSource = (from p in db.Users select new

{ p.ID, p.RegisterDate, p.LastLogin }).Skip(RadGrid1.PageSize * RadGrid1.CurrentPageIndex).Take(RadGrid1.PageSize).ToArray();

}

I tried fiddling with Safari's developer tools a bit, but to no success so far.

Any help is appreciated.

Best Regards.

2 Answers, 1 is accepted

answered on 26 Aug 2011, 09:36 AM

Hi Christian,

This is a browser behavior problem, which can be worked around by setting explicit width for the filter control. In the case with autogenerated columns, you can do this in the ColumnCreated event:

protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)

{

e.Column.FilterControlWidth = Unit.Pixel(200);

}

Greetings,
Tsvetina
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>