column moving left as when i increase header width

[Raj]

Hi,

In My radgrid if i increase the header width the column is shifting to the left(Please see the images). How to resolve this issue.

<div style="width: 100%; height: 650px; overflow: auto; overflow-y: hidden">
    <telerik:RadGrid ID="gvPjtMnt" runat="server" AutoGenerateColumns="false" Height="600px"
        BorderWidth="2px" BorderStyle="Solid" BackColor="White" AllowPaging="True" PagerStyle-AlwaysVisible="true"
        PageSize="20" AllowSorting="True" OnNeedDataSource="gvPjtMnt_OnNeedDataSource"
        AllowFilteringByColumn="true" OnItemCommand="gvPjtMnt_ItemCommand" OnItemCreated="gvPjtMnt_ItemCreated"
        OnItemDataBound="gvPjtMnt_ItemDataBound" OnPreRender="gvPjtMnt_PreRender">
        <HeaderStyle Height="20px" BackColor="#004000" Font-Size="8pt" Font-Bold="True" ForeColor="White"
            HorizontalAlign="Center" BorderColor="White" BorderWidth="1px" />
        <AlternatingItemStyle Font-Size="8pt" BackColor="#F5F5E9" HorizontalAlign="Center"
            BorderWidth="1px" BorderColor="White" />
        <MasterTableView GridLines="None" DataKeyNames="ProjectId" CommandItemDisplay="Top">
            <CommandItemTemplate>
                <table style="width: 100%">
                    <tr align="right">
                        <td style="width: 75%">
                        </td>
                        <td align="right">
                            <asp:linkbutton id="lnkshwFilter" text="ShowFilter" font-underline="true" forecolor="MidnightBlue"
                                runat="server" onclientclick="return showFilterItem()" />
                            <asp:linkbutton id="lnkhdFilter" text="HideFilter" font-underline="true" forecolor="MidnightBlue"
                                runat="server" onclientclick="return hideFilterItem()" />
                        </td>
                        <td align="right">
                            <asp:linkbutton id="lnkclrFilter" text="ClearFilter" font-underline="true" forecolor="MidnightBlue"
                                runat="server" onclick="lnkclrFilter_Click"></asp:linkbutton>
                        </td>
                        <td align="right">
                            Total Records found: <asp:label id="lblTotRecCount" runat="server" font-bold="True"
                                font-size="10pt" forecolor="Black" text="0"></asp:label>
                        </td>
                        <td align="right" valign="middle">
                            <asp:imagebutton id="lnkExportAll" imageurl="~/images/Excel.png" tooltip="Export All"
                                runat="server" onclick="ExportAll_Click" />
                        </td>
                        <td align="right" valign="middle">
                            <asp:imagebutton id="ExportToExcelButton" runat="server" imageurl="~/images/ExportToExcel.gif"
                                tooltip="Export to Excel" onclick="ExportExcel_Click" />
                        </td>
                    </tr>
                </table>
            </CommandItemTemplate>
            <Columns>
                <telerik:GridBoundColumn DataField="ProjectId" UniqueName="ProjectId" Visible="false">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="LOB" DataField="LOB" UniqueName="LOB">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="Division Name" DataField="Division" UniqueName="Division">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="Region Name" DataField="MarketName" UniqueName="MarketName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="Project Name" DataField="ProjectName" UniqueName="ProjectName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="Project Manager Name" DataField="ProjectMgrName"
                    UniqueName="ProjectMgrName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="Number Of Sites Received" DataField="NumSitesReceived"
                    UniqueName="NumSitesReceived">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="Accept Service Order Date" DataField="AcceptServiceOrderTaskCompleteDate"
                    UniqueName="AcceptServiceOrderTaskCompleteDate" DataFormatString="{0:MM/dd/yyyy}">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="PTD" DataField="PTD" UniqueName="PTD" DataFormatString="{0:MM/dd/yyyy}">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="Health Reason" DataField="HealthReason" UniqueName="HealthReason">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="Project Health" DataField="ProjectHealth" UniqueName="ProjectHealth">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="Customer Signed Date" DataField="CustomerSignedDate"
                    UniqueName="CustomerSignedDate" DataFormatString="{0:MM/dd/yyyy}">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="OA Complete Date" DataField="OACompleteDate"
                    UniqueName="OACompleteDate" DataFormatString="{0:MM/dd/yyyy}">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="Customer Requested Due Date" DataField="CustomerRequestedDueDate"
                    UniqueName="CustomerRequestedDueDate" DataFormatString="{0:MM/dd/yyyy}">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="Last Note Added" DataField="LastNoteAdded" HeaderStyle-Width="10%"
                    ItemStyle-Width="10%" UniqueName="LastNoteAdded">
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn UniqueName="EditRows" HeaderStyle-Width="2%" ItemStyle-Width="2%"
                    AllowFiltering="false">
                    <ItemTemplate>
                        <asp:imagebutton runat="server" id="EditPMTsk" commandname="EditRow" imageurl="Images/edit-icon.png"
                            imagealign="Middle" tooltip="Edit Task" />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings AllowColumnsReorder="true">
            <ClientEvents OnGridCreated="GridCreated" />
            <Scrolling AllowScroll="true" UseStaticHeaders="true" />
            <Resizing AllowColumnResize="true" EnableRealTimeResize="false" ResizeGridOnColumnResize="false"
                AllowRowResize="false" />
        </ClientSettings>
        <ItemStyle HorizontalAlign="Center" />
    </telerik:RadGrid>
</div>

[Dimo]

Hi Raj,

Please do not use ItemStyle-Width to set column widths. Use only HeaderStyle-Width.

And also - please do not post duplicate forum threads about the same thing from different accounts.


Dimo
the Telerik team

[Raj]

HI Dimo,

Still I am getting that column shifting.

Thanks

[Dimo]

Hello Raj,

Please do not set border styles declaratively, as this leads to misalignment due to a conflict with the RadGrid skin. You should use CSS instead:

http://www.telerik.com/community/code-library/aspnet-ajax/grid/how-to-add-or-remove-radgrid-borders.aspx

<HeaderStyle Height="20px" BackColor="#004000" Font-Size="8pt" Font-Bold="True" ForeColor="White"
            HorizontalAlign="Center" BorderColor="White" BorderWidth="1px" />
        <AlternatingItemStyle Font-Size="8pt" BackColor="#F5F5E9" HorizontalAlign="Center"
            BorderWidth="1px" BorderColor="White" />

Best wishes,
Dimo
the Telerik team