Header widths don't match item widths with static headers

Eddie

I see there are a ton of messages about column widths with static headers, and I think I've gone through all of them and tried all of the tricks to get the column headers to be the correct width, but so far nothing has worked for me. I have a radgrid in a tooltip (not sure if that matters, this seems to happen anywhere I use a radgrid) and have it set to UseStaticHeaders="True". I have the MasterTable layout set to "Fixed", and have all of the column widths specified, header and item. The column widths for the header DO NOT match the item widths. The item widths are correct. I have tried setting the layout to Auto and removing all of the column widths, same result. I am calling the client-side "repaint" method, no change. I'm really not sure what to do at this point. I'll attach a screenshot of what I get, but here's the code I am using in the aspx:

I've also tried setting the MasterTable width to the same width as the RadGrid (548px), and setting it to 95%, which was another suggestion. None of these fixes have worked for me. Any help is appreciated!

Is the issue you're having the same as what I see? I see that if I have N columns visible on the grid as long as you set the width of LESS than N of the columns, then those widths take. But as soon as you set all N column widths, the left over width gets divided up across all of the columns.

What I'd LIKE to be able to do is set all N columns and the grid take up that much space without having to hard code some other width. If that can't be done, what width needs to be hard coded?

The only thing I've been able to figure out is to set the width of N-1 of the columns and set the width of the whole RadGrid (or let the RadGrid fill the containing div. We have a "Name" column in a lot of our grids which names the item in the system and I don't set the width on that one.

Pavlina

Please remove ItemStyle-Width from your code and lets us know how it goes. Note that only HeaderStyle-Width should be used for setting columns width.

Regards,
Pavlina
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

TonyG

I came to this thread for the exact same reason but found no joy here. From StackOverflow I followed a tip that fixed the issue.

The solution is to ensure you have a Meta line in the header of any page that has a grid:

<headrunat="server">

<title>My Dashboard</title>

<metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE8"/>

<linkrel="favicon"type="image/ico"href="favicon.ico"/>

<linkhref="css1.css"rel="stylesheet"type="text/css"/>

</head>

Note the tag with X-UA-Compatible, IE=EmulateIE8. From what I've read, that tag must go above other tags and below the title.

I honestly don't understand what's happening here. For some reason the issue we're seeing in this thread is a result of having IE9 in Compatibility mode - which I believe means compatible with IE8? But that EmulateIE8 tag forces the browser into NON-Compatibility mode.

Now, does this mean the RadGrid has some IE9-specific code? I put IE9 into IE7 and IE8 browser mode with that tag coming from the server and the page looked fine. Am I really breaking the page for IE7 users? I need to check...

For all of the developers who have never used this, including myself, all I can say is "OK, don't use it unless you need to". Maybe something crept into the latest September builds. I think this problem just started this month, after v2012.2.828 but after 912 or 918.

I hope that helps someone else who stumbles across this thread and others like it. I'll cross-link threads here as I find them.

TonyG

Hi David - I feel yer pain. It looks like you had it. Given that this thread was started over a year ago, I'm thinking there could be something in the product now that helps with this. Whether that's true or not, I'd take the issue to Telerik Support rather than beating my head against forum walls. While most first responses from Support are excellent you'll sometimes need to pursue the inquiry into a second or third round. Be explicit about the grid version you have, OS, and browser version. I also suggest you try various mechanisms available (websites, VMware, etc) to test your app against very specific browser versions. If you can nail down a specific repeatable issue, Telerik might be able to come up with a solution within a couple days.

BTW, this page provides more information about X-UA-Compatible - and in IE10 things have changed.

HTH

Mark

Thanks for the reply, TonyG. I've decided to not waste any more time with the Telerik controls. Their marginal benefit (I really wouldn't know about that, though, since I've never been able to get one to work right.) is not worth the huge headache and time involved in trying to configure them and get them to work.

Eddie

I started this thread and so would just like to follow up by saying that I never did find a fix for this issue that would work for us. I ended up finding an alternate grid that worked in all versions of IE. We do continue to use other Telerik controls in some projects, but more and more I'm trying to move to a SOA with client-side controls and services for data. So where I can, I've replaced Telerik controls with jQuery/Javascript controls. That's my fix.

KidSysco

Setting the MasterTableView Width to 100% has worked great for my RadGrid controls that are using static headers in Internet Explorer 9, 10, and 11 Compatibility Mode.
This does not cause any issues with other browsers like modern versions of Chrome or FireFox either.
This is an awesome fix that has had me stumped for nearly 3 years. I had fought this problem and fought it in so many ways, using all of the browser tricks, forcing IE into different modes using meta tags, http headers, and developer tools.
Therefore, I have clearly re-worded this fix again in this post to further help the search engines.
This is going to help someone out there and make them very happy!​​

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks or appropriate markings.