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

Header widths don't match item widths with static headers

18 Answers 1316 Views

Grid

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

Software asked on 12 Apr 2012, 05:11 PM

RadgridHeaderWidth.png

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

18 Answers, 1 is accepted

answered on 13 Apr 2012, 04:32 AM

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.

answered on 25 Sep 2012, 07:49 AM

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.

answered on 25 Jul 2013, 09:10 PM

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

answered on 21 Aug 2015, 01:47 PM

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!

answered on 01 Mar 2017, 08:17 PM

telerik-fix.png

PD:

this works better:

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

see attach with result: