RadGrid IE8 problem (compatiblilty mode) vs Regular

[Marcus Jones]

In IE8 the filter boxes are not aligned with the columns. I converted IE8 to compatibility mode and everything worked fine. I am wondering if there is a work around or did telerik provide a solution to this problem. If anyone has a quick fix it would be appreciated!

[Daniel]

Hello Marcus,

I tried to reproduce the depicted problem using our online demos but unfortunately to no avail. Could you please test the following demo on your end?
Basic Filtering

Best regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Marcus Jones]

Hey I created the problem for your review!
________________________________________below is all the code to recreate.


using

 

System;

 

using

 

System.Collections;

 

using

 

System.Configuration;

 

using

 

System.Data;

 

using

 

System.Linq;

 

using

 

System.Web;

 

using

 

System.Web.Security;

 

using

 

System.Web.UI;

 

using

 

System.Web.UI.HtmlControls;

 

using

 

System.Web.UI.WebControls;

 

using

 

System.Web.UI.WebControls.WebParts;

 

using

 

System.Xml.Linq;

 

using

 

Telerik.Web.UI;

 

using

 

System.Web.Services;

 

 

public

 

partial class _Default : System.Web.UI.Page

 

{

 

 

protected void Page_Init(object sender, EventArgs e)

 

{

CreateGrid();

 

}

 

 

void CreateGrid()

 

{

 

RadGrid mygrid = new RadGrid();

 

 

mygrid.ID =

"Myradgrid";

 

mygrid.Skin =

"Web20";

 

mygrid.PageSize = 5;

mygrid.Width =

Unit.Pixel(705);

 

mygrid.Height =

Unit.Pixel(400);

 

mygrid.ClientSettings.Scrolling.AllowScroll =

true;

 

mygrid.MasterTableView.TableLayout =

GridTableLayout.Fixed;

 

mygrid.MasterTableView.PagerStyle.Mode =

GridPagerMode.NextPrevAndNumeric;

 

mygrid.MasterTableView.AllowPaging =

true;

 

mygrid.MasterTableView.PageSize = 5;

mygrid.MasterTableView.Width =

Unit.Pixel(700);

 

mygrid.PagerStyle.Mode =

GridPagerMode.NextPrevAndNumeric;

 

 

 

 

 

GridBoundColumn SN = new GridBoundColumn();

 

 

SN.ItemStyle.Width = SN.HeaderStyle.Width = SN.FooterStyle.Width =

Unit.Pixel(40);

 

SN.DataField =

"session_number";

 

SN.HeaderText =

"Session Number";

 

 

GridBoundColumn ST = new GridBoundColumn();

 

ST.ItemStyle.Width =

Unit.Pixel(100);

 

ST.HeaderText =

"Session Type";

 

ST.DataField =

"session_title";

 

 

GridBoundColumn HC = new GridBoundColumn();

 

HC.ItemStyle.Width =

Unit.Pixel(100);

 

HC.DataField =

"has_changed";

 

HC.HeaderText =

"Has Changed";

 

 

GridBoundColumn RN = new GridBoundColumn();

 

RN.ItemStyle.Width =

Unit.Pixel(100);

 

RN.HeaderText =

"Room Name";

 

RN.DataField =

"room_name";

 

 

GridBoundColumn SS = new GridBoundColumn();

 

SS.ItemStyle.Width =

Unit.Pixel(100);

 

SS.HeaderText =

"Session Start";

 

SS.DataField =

"session_start";

 

 

GridBoundColumn SD = new GridBoundColumn();

 

SD.ItemStyle.Width =

Unit.Pixel(100);

 

SD.DataField =

"session_duration";

 

SD.HeaderText =

"Session Duration";

 

 

GridBoundColumn TN = new GridBoundColumn();

 

TN.ItemStyle.Width =

Unit.Pixel(100);

 

TN.HeaderText =

"Type Name";

 

TN.DataField =

"type_name";

 

 

 

mygrid.Columns.Add(SN);

mygrid.Columns.Add(ST);

mygrid.Columns.Add(HC);

mygrid.Columns.Add(RN);

mygrid.Columns.Add(SS);

mygrid.Columns.Add(SD);

mygrid.Columns.Add(TN);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Mydataset data = new Mydataset();

 

mygrid.AllowFilteringByColumn =

true;

 

mygrid.AutoGenerateColumns =

false;

 

mygrid.DataSource = data;

mygrid.DataBind();

 

 

 

 

 

PlaceHolder1.Controls.Add(mygrid);

}

}

_______________________Dataset class below for datasource

using

 

System;

 

using

 

System.Data;

 

using

 

System.Web;

 

using

 

System.Web.UI;

 

using

 

System.Web.UI.WebControls;

 

using

 

System.Xml.Linq;

 

using

 

Telerik.Web.UI;

 

 

///

 

<summary>

 

///

 

Summary description for Mydataset

 

///

 

</summary>

 

public

 

class Mydataset : System.Data.DataSet

 

{

 

public Mydataset()

 

{

 

this.Tables.Add("Sessions");

 

 

this.Tables["Sessions"].Columns.Add("session_number");

 

 

this.Tables["Sessions"].Columns.Add("session_title");

 

 

this.Tables["Sessions"].Columns.Add("has_changed");

 

 

this.Tables["Sessions"].Columns.Add("room_name");

 

 

this.Tables["Sessions"].Columns.Add("session_start");

 

 

this.Tables["Sessions"].Columns.Add("session_duration");

 

 

this.Tables["Sessions"].Columns.Add("type_name");

 

AddRow(

"Sessions", "G101", "Keynote", "False", "Ballroom", "5/6/2007 06:00", "90", "G");

 

AddRow(

"Sessions", "G017", "Gathering all your baskets", "False", "Ballroom B", "5/6/2007 11:00", "90", "G");

 

AddRow(

"Sessions", "Q506", "Patnering with RIM", "False", "Orange", "5/6/2007 21:00", "60", "B");

 

AddRow(

"Sessions", "Q607", "Heath & Support", "True", "Papaya", "5/6/2007 21:00", "60", "B");

 

AddRow(

"Sessions", "Q708", "Carriers in 2007", "False", "Guyava", "5/6/2007 21:00", "60", "B");

 

AddRow(

"Sessions", "Q509", "Can you see the waves ?", "False", "Watermelon", "5/6/2007 21:00", "60", "B");

 

AddRow(

"Sessions", "Q610", "Walking on the clouds", "False", "Canteloupe", "5/6/2007 21:00", "60", "B");

 

AddRow(

"Sessions", "M408", "Carriers in 2007", "False", "Guyava", "5/6/2007 21:00", "60", "B");

 

AddRow(

"Sessions", "M409", "Can you see the waves ?", "False", "Watermelon", "5/6/2007 21:00", "60", "B");

 

AddRow(

"Sessions", "M410", "Walking on the clouds", "False", "Canteloupe", "5/1/2007 12:00", "60", "B");

 

AddRow(

"Sessions", "Q501", "Designing Enterprise Applications", "True", "Sunshine", "5/1/2007 12:00", "60", "B");

 

AddRow(

"Sessions", "M401", "Designing Enterprise Applications", "True", "Sunshine", "5/1/2007 15:00", "60", "B");

 

AddRow(

"Sessions", "M402", "Designing Your Applications", "False", "Grape", "5/1/2007 15:00", "60", "B");

 

AddRow(

"Sessions", "M403", "Implementing Enterprise Applications", "False", "Apple", "5/1/2007 15:00", "60", "B");

 

AddRow(

"Sessions", "M404", "Government Sector", "False", "Pear", "5/1/2007 15:00", "60", "B");

 

AddRow(

"Sessions", "M405", "Eurpoean Standards for Wireless", "False", "Peach", "5/1/2007 15:00", "60", "B");

 

AddRow(

"Sessions", "M406", "Patnering with RIM", "False", "Orange", "5/1/2007 15:00", "60", "B");

 

AddRow(

"Sessions", "M407", "Heath & Support", "True", "Papaya", "5/1/2007 15:00", "60", "B");

 

AddRow(

"Sessions", "Q502", "Designing Your Applications", "False", "Grape", "5/1/2007 17:00", "60", "B");

 

AddRow(

"Sessions", "Q503", "Implementing Enterprise Applications", "False", "Apple", "5/1/2007 17:00", "60", "B");

 

AddRow(

"Sessions", "Q604", "Government Sector", "False", "Pear", "5/1/2007 17:00", "60", "B");

 

AddRow(

"Sessions", "Q705", "Eurpoean Standards for Wireless", "False", "Peach", "5/1/2007 17:00", "60", "B");

 

 

this.Tables["Sessions"].AcceptChanges();

 

}

 

 

private void AddRow(string table, params string[] values)

 

{

 

this.Tables[table].Rows.Add(values);

 

}

 

 

 

 

}

_________________________________________________________________________aspx code below

<%

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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>

 

</

 

head>

 

<

 

body>

 

 

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

 

 

<telerik:RadScriptManager ID="RadManageer" runat ="server"></telerik:RadScriptManager>

 

 

<div>

 

 

<asp:PlaceHolder ID="PlaceHolder1" runat = "server" >

 

 

 

 

 

 

 

 

</asp:PlaceHolder>

 

 

</div>

 

 

</form>

 

</

 

body>

 

</

 

html>

 

[Daniel]

Hello Marcus,

Your column is too narrow and the filter text box overflows in all browsers - even in IE compatibility mode (refer to the attached screenshot)  I recommend you set the FilterControlWidth property to value that is appropriate for such width.

SN.FilterControlWidth = Unit.Pixel(10);

or:

SN.FilterControlWidth = Unit.Percentage(30);

Also I we don't recommend you use the ItemStyle-Width property - please use HeaderStyle-Width instead.

Best regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Vishal Gajjar]

Hi,

I have the same kind of problem for telerik grid. I cannot fix the header width because In the grid I have dynamic columns so I cannot hard-code the width of the columns.

Can you please tell me whats is the best possible way to fix the problem.

 

[Daniel]

Hello Vishal,

You could set the FilterControlWidth property dynamically, depending on the width of the corresponding column.

Regards,
Daniel
the Telerik team