RadGrid Column Headers Misaligned

[Paul]

I can't get the column headers to line up with the masterview table columns.  I have been trying to fix this for 2 days and I have a bunch of radgrids that I am updating, this is the first one.  If I take all of the headerwidths out then I get close, but the first column has to be much wider than the other because of the type of data stored.  The code is below, I will attach a screen shot.  Thanks. 

<telerik:RadGrid ID="rgSalesOrder" DataSourceID="dsSalesOrderList" ShowHeader="true"
    Width="676px" Height="185" AutoGenerateColumns="false" GridLines="None" AllowPaging="True"
    PageSize="30" runat="server" OnSelectedIndexChanged="rgSalesOrder_SelectedIndexChanged"
    OnItemDataBound="rgSalesOrder_ItemDataBound" OnSortCommand="rgSalesOrder_SortCommand" onpageindexchanged="rgSalesOrder_PageIndexChanged"
    Skin="Windows7" SkinID="Windows7" EnableEmbeddedSkins="True" AllowSorting="true"  >
    <PagerStyle  Mode="NextPrevAndNumeric" PageButtonCount="5"  />
    <HeaderStyle HorizontalAlign="Left" />
    <MasterTableView AllowPaging="true" DataKeyNames="Id" AllowSorting="true" >
        <Columns>
            <telerik:GridTemplateColumn HeaderText="Customer" SortExpression="Company" HeaderStyle-Width="200px" >
                <ItemTemplate>
                    <asp:LinkButton ID="lbtnCompany" runat="server" Text='<%#Bind("Company") %>' OnClick="lbtnCompany_Click"></asp:LinkButton>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:LinkButton ID="lbtnCompany" runat="server" Text='<%#Bind("Company") %>' OnClick="lbtnCompany_Click"></asp:LinkButton>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn HeaderText="User" DataField="CreatedBy" HeaderStyle-Width="50px" >
            </telerik:GridBoundColumn>
            <telerik:GridButtonColumn ButtonType="LinkButton" HeaderText="Quote" CommandName="Select"
                DataTextField="Id" SortExpression="Id"  HeaderStyle-Width="50px" >
            </telerik:GridButtonColumn>
            <telerik:GridBoundColumn HeaderText="Date" DataField="CreatedOn" DataFormatString="{0:MM/dd/yyyy}" HeaderStyle-Width="75px" >
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Status" DataField="OrderStatus" HeaderStyle-Width="75px" >
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Value" DataField="QuoteValue" DataFormatString="{0:c}" HeaderStyle-Width="75px" >
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn HeaderText="Select" >
                <ItemTemplate>
                    <asp:CheckBox runat="server" ID="chkSelect" />
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:CheckBox runat="server" ID="chkSelect" />
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="ACTION" SortExpression="Status" Visible="false" >
                <ItemTemplate>
                    <table id="tblStatus" border="0px" cellpadding="0px" cellspacing="0px" width="0px">
                        <tr>
                            <td style="text-align: center">
                                <asp:Label ID="lblCustomerID" runat="server" Visible="false" Text='<%# Bind("CustomerId") %>'></asp:Label>
                                <asp:Label ID="lblStatusID" runat="server" Visible="false" Text='<%# Bind("Status") %>'></asp:Label>
                                <asp:Label ID="lblStatus" runat="server" Visible="false" Text='<%# Bind("Status") %>'></asp:Label>
                                <asp:Label ID="lblRowStyle" runat="server" Visible="false" Text='<%# Bind("RowStyle") %>'></asp:Label>
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <Scrolling AllowScroll="True" EnableVirtualScrollPaging="true" UseStaticHeaders="true" ScrollHeight="141"  />
        <Resizing AllowColumnResize="true" />
    </ClientSettings>
</telerik:RadGrid>

[Princy]

Hello Paul,

You can set the width based on your column size or set the Tablelayout as "auto". Here is a sample code.

ASPX:

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

Thanks,
Princy.

[Paul]

Everything I have read on this forum says to only set the HeaderStyle-Width.  Setting the ItemStyle-Width doesn't seem to make a difference.

[Pavlina]

Hi Paul,

I tried to replicate the alignment issue locally but to no avail. Please find attached a sample runnable project which is working properly. Test it on your side and let me know what the differences in your case is.

All the best,
Pavlina
the Telerik team