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

column moving left as when i increase header width

3 Answers 44 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Raj
Top achievements
Rank 1
Raj asked on 01 Oct 2010, 10:12 PM
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>

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 04 Oct 2010, 04:44 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Raj
Top achievements
Rank 1
answered on 04 Oct 2010, 11:01 PM
HI Dimo,

Still I am getting that column shifting.

Thanks
0
Dimo
Telerik team
answered on 06 Oct 2010, 03:05 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Grid
Asked by
Raj
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Raj
Top achievements
Rank 1
Share this question
or