RadGrid Column header and data item alignment problem

[Rahul]

Hi ,

We are using RadGrid in our application , the problem we are facing is that the RadGrid Header and the data items are not properly aligned with each other. Please help us in this.



Thanks,
Rahul

[Jayesh Goyani]

Hello,

try to give width

<telerik:GridBoundColumn DataField="Name" HeaderText="Name">
                <HeaderStyle Width="100px" /> // Width="50%"
                <ItemStyle Width="100px" /> // Width="50%"
                </telerik:GridBoundColumn>

Thanks,
Jayesh Goyani

[Rahul]

Hi,

We tried the solution that you given but it doesn't work. Actually we are using Static Headers & if we remove it then it will work fine. But we need Static Headers. 
We are providing the code & related CSS for your reference,

<telerik:RadGrid ID="RadGrid" runat="server" CssClass="RadGrid_Default rgMasterTable"
                                    Width="100%" Height="150px" GridLines="None" OnSelectedIndexChanged="RadGrid_SelectedIndexChanged"
                                    SelectedItemStyle-CssClass="Selected" AllowMultiRowSelection="false"
                                    AutoGenerateColumns="false">
                                    <ClientSettings Scrolling-AllowScroll="true" EnablePostBackOnRowClick="true" Scrolling-ScrollHeight="220"
                                        AllowKeyboardNavigation="true" EnableAlternatingItems="false">
                                        <Selecting AllowRowSelect="true" />
                                        <Scrolling UseStaticHeaders="true" AllowScroll="true" />
                                    </ClientSettings>
                                    <SortingSettings EnableSkinSortStyles="false" />
                                    <MasterTableView HierarchyLoadMode="ServerOnDemand" ItemStyle-Wrap="true" NoMasterRecordsText="">
                                        <Columns>
                                            <telerik:GridBoundColumn DataField="Header1" HeaderStyle-CssClass="RadGridColumnHeader"
                                                HeaderText="Header1" HeaderStyle-Width="80px">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="Header2" HeaderStyle-CssClass="RadGridColumnHeader"
                                                HeaderText="Header2" HeaderStyle-Width="80px">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="Header3"
                                                HeaderStyle-CssClass="RadGridColumnHeader" HeaderText="Header3" HeaderStyle-Width="80px">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="Header4" HeaderStyle-CssClass="RadGridColumnHeader"
                                                HeaderText="Header4" HeaderStyle-Width="80px">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="Header5" HeaderStyle-CssClass="RadGridColumnHeader"
                                                HeaderText="Header5" HeaderStyle-Width="80px">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="Header6" HeaderStyle-CssClass="RadGridColumnHeader"
                                                HeaderText="Home Header6" HeaderStyle-Width="100px">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn Visible="false" DataField="Header7" HeaderStyle-CssClass="RadGridColumnHeader" HeaderText="Header7" HeaderStyle-Width="100px">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn Visible="false" DataField="Header8" HeaderStyle-CssClass="RadGridColumnHeader"
                                                HeaderText="Header8" HeaderStyle-Width="50px">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn Visible="false" DataField="Header9" HeaderStyle-CssClass="RadGridColumnHeader"
                                                HeaderText="Header9" HeaderStyle-Width="80px">
                                            </telerik:GridBoundColumn>
                                        </Columns>
                                    </MasterTableView>
                                </telerik:RadGrid> 

.RadGrid_Default .rgMasterTable
{
    font-size: inherit !important;
    font-weight: normal !important;
    font-family: Microsoft Sans Serif,Verdana,Arial !important;
}

.Selected
{
    font-size: inherit !important;
    font-weight: normal !important;
    color: #ffffff !important;
    background: none !important;
    background-color: #309BFD !important;
    font-family: Microsoft Sans Serif,Verdana,Arial;
}

.RadGridColumnHeader
{
    background-color: #D4D0C8 !important;
    border: 1px solid #D4D0C8 !important;
    color: #444444 !important;
    font-weight: bold !important;
    text-align: left !important;
    height: 25px !important;
    background: none !important;
    background-image: url("/Images/ButtonBg.gif") !important;
    text-indent: 2px !important;
}

So please provide the solution accordingly.

Thanks,
Rahul

[Jayesh Goyani]

Hello Rahul,

<telerik:GridBoundColumn>
<HeaderStyle CssClass="RadGridColumnHeader"  Width="100px"/>
 <ItemStyle Width="100px" />
</telerik:GridBoundColumn>

i am not able to reproduce the problem, please see attached image.
also give width in item style to grid column.

Thanks,
Jayesh Goyani

[Kris]

I have the exact same problem and it only starts when vertical scrollbar becomes visible.

[Pavlina]

Hi,

Note that it is not recommended to use ItemStyle-Width for setting column widths. Only HeaderStyle-Width should be used.

<telerik:GridBoundColumn>
 <HeaderStyle  Width="100px"/>
</telerik:GridBoundColumn>

Make sure that you have not set ItemStyle-Width somewhere in your code and TableLayout property is set to Fixed and see if it makes any difference.

Greetings,
Pavlina
the Telerik team

[Harish]

Hello,

I am having similar problem, I removed all the itemstyle width and I set table layout to fixed.
I am still having similar problem.

Version of telerik we have is "2011.1.315.35"

Thanks

[Thomas Mittag]

We are seeing similar issues. It appears if the column sizes are re-adjusted to fit the screen, the size of column headers do not match the size calculated for data cells in the grid.

Is there any approach to fix this issue?

[Pavlina]

Hello,

Can you paste the problematic grid declaration, so we can test it locally? Also specify which is the browser you are using.

Regards,
Pavlina
the Telerik team

[Thomas Mittag]

The issue occurs in IE8 with property UseStaticHeaders turned on (which is required in this case because we are using vertical scrolling in the Grid).
In that case the grid generates a separt table for the Headers and it appears that the header table does not strech to fit the entire width of the grid, while the table for the data items uses the whole width.  This discrepancy in total table width appears to cause a unequal distribution of individual column sizes between the header table and the data table.
We are only setting the Header style to define the column width, and I have tried TableLayout="Static" with no avail.

We are currently using the 2012 Q1 SP  Ajax Controls
 
Regards
Thomas

[Pavlina]

Hi,

You can try setting MasterTableView Width property to 100% and see if it makes any difference. If this not helps it will be best if you open a formal support ticket and send us a sample runnable project which we can examine locally. The blog post below explains how to isolate the problem:
http://blogs.telerik.com/blogs/posts/10-09-29/isolating-a-problem-in-a-sample-project.aspx

Kind regards,
Pavlina
the Telerik team

[Jaycent]

I was able to get this working by specifying the following on MasterTableView:
Width="100%" TableLayout="Fixed"
also remove itemstyle-width property specification on individual grid columns (specify width on column header only)
For me, the issue was only apparent in IE8 when page was NOT served from localhost.

[Matthew]

Thank you Jayesh, that did the trick! :)

It's ridiculous that this is still an issue in 2015. The default behavior should be such that the header columns and data items are ALWAYS aligned. :(

[J2K]

None of the solutions proposed work all of the time, but some work some of the time.   Standard settings I use are mastertable width=100%; headerstyle-horizontal align=center; tablelayout=fixed; header-width=variable, depends upon the width needed to accommodate the data length; static-headers = true; scrollheight = varies, depends on number of rows.  Each grid has become an adventure, never know whether the Telerik code will keep column headers and data items aligned.  With all current versions of major browsers, Chrome, Fixfox, Opera, IE, the Telerik grid alignment bug surfaces.   Of all the proposed solutions, UseStaticHeaders=false, seems most likely to result in a presentable grid most of the time, but of course this is a very bad practice for customers that need the header displayed while scolling.  Will Telerik ever fix this problem?

[Pavlina]

Hello,

Basically with the latest version of Telerik.UI controls nobody should encounter alignment problems with the grid when static headers are enabled. We tried to cover and test all possible scenarios, however we can not guarantee that we have not missed any custom implementation. Therefore we asked for a runnable project or related code declaration, so we can test the problematic scenario on our side and confirm if this is a bug in the control or it is due to wrong implementation.

Regards,
Pavlina
Telerik

 

 

[Matthew]

Hello Pavlina. It just so happens that I did that very thing yesterday. :)

http://feedback.telerik.com/Project/108/Feedback/Details/149786-bug-since-2011-column-header-misaligned-with-data

At that link, you'll find a project you can download. I removed the Telerik assemblies to conserve file size, but it is using the latest version (as of this post) 2014.3.1209 (targeted at .NET 4.0).

[Pavlina]

Hello,

Thank you for logging this  problem in the feedback portal. We will test the attached project and will update the item accordingly.

Regards,
Pavlina
Telerik

 

 

[rrawla]

I'm having the same issue with 2014.3.1209.34 , please let me as soon as a fix is available

[Pavlina]

Hello Rahul,

We will update the status of the item below once the issue is resolved:
http://feedback.telerik.com/Project/108/Feedback/Details/149786-bug-since-2011-column-header-misaligned-with-data


Regards,
Pavlina
Telerik

 

 

[RJ]

Misalign happens when vertical scrollbar shows. Headers won't adjust while the items adjusted to the left, it moves to give space to vertical scrollbar.
Is there a way to also move the header when scrollbars shows?

[Matthew]

I have found a workaround by modifying the padding-right for the header element.  Hopefully this will help someone. 

My Radgrid has ScrollHeight="600px" and I defined the following in my css:

#rgScorecard #rgScorecard_GridHeader .rgMasterTable {
    padding-right: 17px;
}

This adds padding to the right of the header element to compensate for the scrollbar.  But, I had an issue where the collapsing a group caused the columns to become misaligned again, so I used this javascript to correct the padding:
<script type="text/javascript">
    Sys.Application.add_load(function () {
        //If scrollbar is not visible, then remove padding from right side of header
        if ($("#rgScorecard #rgScorecard_GridData")[0].scrollHeight <= 600) {
            $("#rgScorecard #rgScorecard_GridHeader .rgMasterTable").first().css("padding-right", "0");
        }
    });
</script>

[Amit]

Is there any update on this issue ? I am using 2013 Q1 version and facing same issue. 

[Pavlina]

Hello,

Could you confirm that you have not set ClientIDMode of the grid control to Static? As explained in the feedback item below:
http://feedback.telerik.com/Project/108/Feedback/Details/149786-bug-since-2011-column-header-misaligned-with-data

The AutoID is required for correct working of our composite controls.

Regards,
Pavlina
Telerik

[Amit]

Yes. ClientID is not set to static although I am using static headers since I want vertical scroll bar for the grid.

[Pavlina]

Hello,

If you are using the Q2 2015 version of Telerik UI you should not encounter any alignment problems. In case you use older version, please upgrade to the latest release, because we do not provide fixes for older versions of the suite.

Regards,
Pavlina
Telerik

[Pavlina]

Hello,

If you are using the Q2 2015 version of Telerik UI you should not encounter any alignment problems. In case you use older version, please upgrade to the latest release, because we do not provide fixes for older versions of the suite.

Regards,
Pavlina
Telerik

[CRAIG]

While I love Telerik, I purchased the asp.net controls (and reporting) in February 2016 and have the same exact problem.  My solution is purely by accident in that I am using a Javascript message from the Demo App that by some miracles aligns all the columns.  I changed the message to simply let the user know the Web data had been updated and the columns aligned.The only difference is that I have set the filter control width.  The default behavior seemed to have a 200px width filter for a 4 digit numeric field.  It forced the grid headers to be larger than I desired.  The javascript that works (based on Telerik Demo) is:

 

var grid;
function GridCreating(sender, eventArgs) {
    alert("Data Updated-Aligned" );
}

For whatever reason, it aligns all the columns :)

[Pavlina]

Hello Craig,

May I ask you isolate the alignment problem in a runnable project and send it to us via support ticket. In case the issue persists with the latest version as you said we will debug it locally and will provide a solution/fix for it right away.

Regards,
Pavlina
Telerik

[Dana]

I've started having an alignment issue on IE when updated to version 11.0.30. When there is no data in the grid, the grid renders as expected. 

 

Howver, once there's data in the grid, some headers disappear, data isn't aligned correctly, for columns that are empty, there are no borders. 

 

usestaticheaders=true

allowscroll=true

mastertableview=true 

 

The grid works on all other browsers. I'd appreciate all the help I can get. Thanks 

[Dana]

<telerik:RadGrid ID="dgList" runat="server" AllowPaging="True" Skin="Office2010Blue" Height="580px" AllowSorting="True" CssClass="RadGrid_Summary" >
<PagerStyle Mode="NextPrevAndNumeric" Position="Bottom" AlwaysVisible="true" />
<ClientSettings AllowColumnsReorder="true" >
<Scrolling AllowScroll="True" UseStaticHeaders="TRUE" />
</ClientSettings>        
<MasterTableView AutoGenerateColumns="false" Width="100%" DataKeyNames="PregnancyID, PregnancySubmitStatus, MedicaidID"   CommandItemDisplay="Top" PageSize="100" EditMode="PopUp" AllowPaging="true" TableLayout="auto" >   
<CommandItemSettings ShowAddNewRecordButton="false" AddNewRecordText="Add New" ShowRefreshButton="false" ShowExportToExcelButton="true" ShowExportToPdfButton="true" />
            
<Columns>
                <telerik:GridBoundColumn HeaderText="Newborn Status" UniqueName="NewbornStatus" SortExpression="NewbornStatus" DataField="NewbornStatus" ItemStyle-Wrap="false" HeaderStyle-Width="100px" >
</telerik:GridBoundColumn>
<telerik:GridButtonColumn CommandName="ViewClaim" DataTextField="ClaimID" HeaderText="Claim ID"  SortExpression="ClaimID" UniqueName="ClaimID" HeaderStyle-Width="100px" ></telerik:GridButtonColumn>
<telerik:GridBoundColumn HeaderText="Submit Status" UniqueName="PregnancySubmitStatus" SortExpression="PregnancySubmitStatus" DataField="PregnancySubmitStatus" ItemStyle-Wrap="false" HeaderStyle-Width="100px" >
</telerik:GridBoundColumn>
<telerik:GridButtonColumn CommandName="ViewPregnancy" DataTextField="MedicaidID" HeaderText="Mothers Medicaid ID"  SortExpression="MedicaidID" UniqueName="MedicaidID" HeaderStyle-Width="100px" ></telerik:GridButtonColumn>
<telerik:GridBoundColumn HeaderText="Mother Last Name" UniqueName="MotherLastName" SortExpression="MotherLastName" DataField="MotherLastName" ItemStyle-Wrap="false" HeaderStyle-Width="100px" >
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Mother First Name" UniqueName="MotherFirstName" SortExpression="MotherFirstName" DataField="MotherFirstName" ItemStyle-Wrap="false" HeaderStyle-Width="100px" >
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Pregnancy Status" UniqueName="PregnancyStatus" SortExpression="PregnancyStatus" DataField="PregnancyStatus" HeaderStyle-Width="100px" >
</telerik:GridBoundColumn>              
<telerik:GridBoundColumn HeaderText="Service Begin Date" UniqueName="ClaimLowServiceDate" SortExpression="ClaimLowServiceDate" DataField="ClaimLowServiceDate" DataFormatString="{0:d}" HeaderStyle-Width="100px" >
</telerik:GridBoundColumn>       
<telerik:GridBoundColumn HeaderText="Service End Date" UniqueName="ClaimHighServiceDate" SortExpression="ClaimHighServiceDate" DataField="ClaimHighServiceDate"  DataFormatString="{0:d}" HeaderStyle-Width="100px" >
</telerik:GridBoundColumn>       
                <telerik:GridButtonColumn CommandName="ViewNewborn" DataTextField="NewbornID" HeaderText="Newborn ID"  SortExpression="NewbornID" UniqueName="NewbornID" HeaderStyle-Width="100px" ></telerik:GridButtonColumn>  
                <telerik:GridBoundColumn HeaderText="Newborn Subscriber ID" UniqueName="SubscriberID" SortExpression="SubscriberID" DataField="SubscriberID" ItemStyle-Wrap="false" HeaderStyle-Width="100px" >
</telerik:GridBoundColumn>     
                <telerik:GridBoundColumn HeaderText="Newborn Medicaid ID" UniqueName="NewbornMedicaidID" SortExpression="NewbornMedicaidID" DataField="NewbornMedicaidID" HeaderStyle-Width="100px" >
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Newborn Last Name" UniqueName="NewbornLastName" SortExpression="NewbornLastName" DataField="NewbornLastName" ItemStyle-Wrap="false" HeaderStyle-Width="100px">
</telerik:GridBoundColumn>       
<telerik:GridBoundColumn HeaderText="Newborn First Name" UniqueName="NewbornFirstName" SortExpression="NewbornFirstName" DataField="NewbornFirstName" ItemStyle-Wrap="false" HeaderStyle-Width="100px">
</telerik:GridBoundColumn>       
<telerik:GridBoundColumn HeaderText="Newborn Gender" UniqueName="NewbornGender" SortExpression="NewbornGender" DataField="NewbornGender" HeaderStyle-Width="100px" >
</telerik:GridBoundColumn>                         
<telerik:GridBoundColumn HeaderText="Newborn Birth Date" UniqueName="NewbornBirthDate" SortExpression="NewbornBirthDate" DataField="NewbornBirthDate"  DataFormatString="{0:d}" HeaderStyle-Width="100px" >
</telerik:GridBoundColumn>        
                <telerik:GridBoundColumn HeaderText="Number of Claims" UniqueName="Claims" SortExpression="Claims" DataField="Claims" HeaderStyle-Width="100px">
</telerik:GridBoundColumn>                                                      
<telerik:GridBoundColumn HeaderText="Number of Newborns" UniqueName="Newborns" SortExpression="Newborns" DataField="Newborns" HeaderStyle-Width="100px" >
</telerik:GridBoundColumn>   
                <telerik:GridBoundColumn HeaderText="Days in NBT" UniqueName="Days" SortExpression="Days" DataField="Days" HeaderStyle-Width="100px" >
</telerik:GridBoundColumn>  
                <telerik:GridBoundColumn HeaderText="Create Date" UniqueName="CreateDate" SortExpression="CreateDate" DataField="CreateDate" ItemStyle-Wrap="false" HeaderStyle-Width="100px">
</telerik:GridBoundColumn>                                                                           
                 <telerik:GridBoundColumn HeaderText="Last Update Date" UniqueName="LastUpdate" SortExpression="LastUpdate" DataField="LastUpdate"  ItemStyle-Wrap="false" HeaderStyle-Width="100px">
</telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="User" UniqueName="User" SortExpression="User" DataField="User" >
</telerik:GridBoundColumn>                                                                                                                                              
</Columns>
</MasterTableView>
</telerik:RadGrid>

 

Everything is shifting to the right because the first column header is missing.

[Dana]

Adding the below bolded lines to my master page fixed the compatibility issue. Hope this helps someone else:

<head runat="server">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11" />

[Dana]

I added the below bolded lines to my master page: This solved my issue with compatibility.

<head runat="server">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11" />

[Pavlina]

Hello,

I am glad to hear you managed to solve the problem on your own. Also thank you for sharing the solution, it could be really useful for someone else.

Regards,
Pavlina
Telerik

[Hori]

I'm having a trouble using rad grid, all the font style of every row is not the same. have you've encountered like this?

[wildyaker]

Some intranets force people into compatibility mode.  Make sure your site is not running in compatibility mode or this issue comes up.  Telerik dropped support for compatibility mode a couple of years ago I believe.

[Marcio]

Hi Jayesh, to reproduce the problem you will need to browse with ie internal browser. That option can be selected inside of visual studio. The ie internal browser shows the problem as the final display of some ie browser in some servers. So this is a real problem although does not affect everyone. If you can make it to look nice when viewing it in ie internal browser, than you nail it correctly.