Header widths don't match item widths with static headers

14 posts, 0 answers
  1. Eddie
    Eddie avatar
    66 posts
    Member since:
    May 2008

    Posted 12 Apr 2012 Link to this post

    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
  2. TechSavvySam
    TechSavvySam avatar
    38 posts
    Member since:
    Jul 2009

    Posted 12 Apr 2012 Link to this post

    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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 16 Apr 2012 Link to this post

    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
    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.
  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 16 Apr 2012 Link to this post

    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
    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.
  6. TonyG
    TonyG avatar
    239 posts
    Member since:
    Feb 2006

    Posted 25 Sep 2012 Link to this post

    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.
  7. David M
    David M avatar
    3 posts
    Member since:
    Jul 2007

    Posted 22 Jul 2013 Link to this post

    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.
  8. David M
    David M avatar
    3 posts
    Member since:
    Jul 2007

    Posted 25 Jul 2013 Link to this post

    %!&@! 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!
  9. TonyG
    TonyG avatar
    239 posts
    Member since:
    Feb 2006

    Posted 25 Jul 2013 Link to this post

    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
  10. Mark
    Mark avatar
    11 posts
    Member since:
    Jun 2012

    Posted 05 Aug 2013 Link to this post

    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.
  11. Eddie
    Eddie avatar
    66 posts
    Member since:
    May 2008

    Posted 05 Aug 2013 Link to this post

    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.
  12. Attilio
    Attilio avatar
    1 posts
    Member since:
    May 2008

    Posted 09 Apr 2014 in reply to David M Link to this post

    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
  13. KidSysco
    KidSysco avatar
    10 posts
    Member since:
    Aug 2013

    Posted 21 Aug 2015 Link to this post

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

  14. Daniel
    Daniel avatar
    1 posts
    Member since:
    Feb 2016

    Posted 31 Oct in reply to KidSysco Link to this post

    Unfortunately doesn't work for me. Thanks for the suggestion though.
  15. KidSysco
    KidSysco avatar
    10 posts
    Member since:
    Aug 2013

    Posted 31 Oct Link to this post

    In addition to that, I must set all item width and header width values as well.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017