Header widths don't match item widths with static headers

[Software]

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:

<telerik:RadGrid ID="radGridAssociates" EnableViewState="True" runat="server" AllowSorting="false"
    AutoGenerateColumns="false" Skin="Web20" EnableTheming="True"
    ClientSettings-EnableRowHoverStyle="True" EnableEmbeddedSkins="True"
    OnItemDataBound="RadGridAssociatesItemDataBound" Width="548px" Height="290px"
    OnNeedDataSource="RadGridAssociatesNeedDataSource">
    <ClientSettings AllowColumnsReorder="False" EnablePostBackOnRowClick="false" ClientEvents-OnRowSelected="usePopup">
        <Resizing AllowColumnResize="True" EnableRealTimeResize="True" />
        <Selecting AllowRowSelect="True" />
        <Scrolling  AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" />
    </ClientSettings>
    <MasterTableView DataKeyNames="Xref" ClientDataKeyNames="Xref" ShowHeadersWhenNoRecords="false"
        EnableNoRecordsTemplate="true" TableLayout="Fixed" AlternatingItemStyle-Font-Size="11px">
        <ItemStyle HorizontalAlign="Center" Font-Size="11px" Width="548px"></ItemStyle>
        <NoRecordsTemplate>
            <div style="padding:5px; background:transparent; font-size:12px; text-align:left;">
                No associates found
            </div>
        </NoRecordsTemplate>
        <Columns>
            <telerik:GridClientSelectColumn ButtonType="PushButton" Visible="False" CommandName="Select" Text="Select" UniqueName="column">
            </telerik:GridClientSelectColumn>
            <telerik:GridTemplateColumn HeaderText="PIC" UniqueName="colPic">
                <ItemStyle Width="30px"></ItemStyle>
                <HeaderStyle Font-Size="10px" Wrap="False" Width="30px"/>
                <ItemTemplate>
                        <img alt='photo' src='<%= GetConfig().imageUrl %>?x=<%# Eval("XREF") %>&s=small' width="30" height="38" style="border:0px;">
                    </a>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="FLAGS" UniqueName="colFlags">
                <ItemStyle Wrap="false" Font-Size="10px" Width="30px"></ItemStyle>
                <HeaderStyle Font-Size="10px" Wrap="False" Width="30px"/>
                <ItemTemplate>
                    <asp:Label ID="lblAlerts" CssClass="flags" runat="server"></asp:Label>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="NAME" UniqueName="colName" ItemStyle-HorizontalAlign="Left">
                <HeaderStyle Width="110px"></HeaderStyle>
                <ItemTemplate>
                        <%# Eval("LastName") + ", " + Eval("FirstName") + " " + Eval("MiddleName") %>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn HeaderText="S" DataField="Sex" UniqueName="colSex" HeaderTooltip="Sex">
                <HeaderStyle Width="6px" Wrap="False" />
                <ItemStyle Width="6px" Wrap="False" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="R" DataField="Race" UniqueName="colRace" HeaderTooltip="Race">
                <HeaderStyle Width="7px" Wrap="False" />
                <ItemStyle Width="7px" Wrap="False" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="HGT" DataField="Height" UniqueName="colHeight" HeaderTooltip="Height">
                <HeaderStyle Width="12px" Wrap="False" />
                <ItemStyle Width="12px" Wrap="False" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="WGT" DataField="Weight" UniqueName="colWeight" HeaderTooltip="Weight">
                <HeaderStyle Width="14px" Wrap="False" />
                <ItemStyle Width="14px" Wrap="False" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="AGE" DataField="Age" UniqueName="colAge" HeaderTooltip="Age">
                <HeaderStyle Width="12px" Wrap="False" />
                <ItemStyle Width="12px" Wrap="False" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="DOB" DataField="Dob" DataFormatString="{0:d}" UniqueName="colDob" HeaderTooltip="DOB">
                <HeaderStyle Width="48px" Wrap="False" />
                <ItemStyle Width="48px" Wrap="False" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="XREF" DataField="Xref" UniqueName="colXref" HeaderTooltip="XREF">
                <HeaderStyle Width="36px" Wrap="False" />
                <ItemStyle Width="36px" Wrap="False" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="MATCHES" DataField="AssociatesMatchCount" UniqueName="colMatchCount">
                <HeaderStyle Width="48px" Wrap="False" />
                <ItemStyle Width="48px" Wrap="False" />
            </telerik:GridBoundColumn>
        </Columns>
        <RowIndicatorColumn Visible="False">
        </RowIndicatorColumn>
        <ExpandCollapseColumn Resizable="False" Visible="False">
        </ExpandCollapseColumn>
        <EditFormSettings>
            <PopUpSettings ScrollBars="None" />
        </EditFormSettings>
    </MasterTableView>
</telerik:RadGrid>

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!

Thanks,
Eddie

[TechSavvySam]

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]

Hello Eddie,

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

[Pavlina]

Hi Sam,

You can refer to the forum thread below for more information on column widths.

http://www.telerik.com/community/forums/aspnet/grid/best-practice-for-grid-and-column-widths.aspx#1214355

Regards,
Pavlina
the Telerik team

[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:

<head runat="server">
    <title>My Dashboard</title>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    <link rel="favicon" type="image/ico" href="favicon.ico" />
    <link href="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.

[David M]

Thank you so much.  I've been struggling with this for a long time and had all but given up.  The meta tag fixed the grid in my IE 10 browser.

[David M]

%!&@! today it's not fixed.  I still have the meta tag right below the <title></title> in my <head> and the columns are all out of whack again.  POS!

[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.

[Software]

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.

[Attilio]

I had the same problem, all I needed to to is set headers to static false  UseStaticHeaders="false"

If you set your column width, you need to set this value to false

[KidSysco]

This fixed the problem for me.

http://www.telerik.com/forums/radgrid-static-headers-with-ie

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

[Daniel]

Unfortunately doesn't work for me. Thanks for the suggestion though.

[KidSysco]

In addition to that, I must set all item width and header width values as well.

[Suraj]

Put you <ClientSettings> tag and content after <MasterTableView>. I swear it worked for me :)

[Suraj]

Apart from moving the <ClientSettings > after <MasterTableView> .. Please put UseStaticHeaders="False" . Do not use the ItemStyle-Width to set the width. Just use HeaderStyle-Width. :)

[W]

Hi.

This fixed the problem for me.

Add the folowing lines to the page .css

.rgHeaderWrapper { padding-right: 17px;}
.rgFooterDiv { padding-right: 17px;}

[W]

PD:

this works better:

.rgHeaderWrapper { padding-right: 17px !important;}
.rgFooterDiv { padding-right: 17px !important;}

 

see attach with result:

 

[Tim Black]

For me, setting MasterTableView Width="100%" fixed the issue.  Thanks