Column Header Alignment

[Hunter]

I'm having the same issues outlined in many other threads. That is that my column headers do not align with my column's content. I'm using the latest telerik build and I've had no issues with IE or Firefox however Chrome and Safari (windows) don't work. I've tried the following steps which I've found in this forum:

• Made sure non of my columns are using the ItemStyle-Width (only HeaderStyle-Width).
• Set my MasterTableView 'TableLayout' to Fixed.
• Handled the OnGridCreated client event to force the grid to repaint.

None of these options fixed the issue. One setting that seemed to get me closer was removing HeaderStyle-Wrap=False and ItemStyle-Wrap=False. Again setting each of these to false got me much closer however they were still way off. Any help with this would be greatly appreciated as time is of the essence. Thank you.

[Mira]

Hello,

The provided information is not enough for me to fully understand your scenario. Could you please provide the grid declaration and a description of the desired result?
Sending us a sample project will be highly appreciated.

I am looking forward to your reply.

All the best,
Mira
the Telerik team

[Hunter]

Here you go! :) So I've narrowed it down to the following client setting, Scrolling-UseStaticHeaders="true". If I remove this settings the column headers align with the content in chrome (Yeah!). If I add this settings back in however, all of my column headers show with a default width one after another with a blank space (kind of a blue color) appearing after the last visibile column. Of cource I have to use this setting so I'm not out of the woods yet. Your help is greatly appreciated!

<telerik:RadGrid ID="grdTasks"

                         ClientSettings-Scrolling-UseStaticHeaders="true"

                         ClientSettings-Resizing-AllowColumnResize="true"
                         ClientSettings-Scrolling-AllowScroll="true"
                         ClientSettings-AllowColumnsReorder="true"
                         ClientSettings-AllowAutoScrollOnDragDrop="true"
                         ClientSettings-EnableRowHoverStyle="false"
                         ClientSettings-Selecting-AllowRowSelect="true"
                         SortingSettings-EnableSkinSortStyles="true"
                         SortingSettings-SortedBackColor="#eff2f6"
                         HeaderStyle-Wrap="false"
                         EnableHeaderContextMenu="True"
                         EnableHeaderContextFilterMenu="True"
                         ShowStatusBar="True"
                         ClientSettings-ColumnsReorderMethod="Reorder"
                         AllowPaging="true"
                         PageSize="50"
                         AllowMultiRowSelection="true"
                         runat="server"
                         DataSourceID="SqlDataSource1">


            <GroupingSettings CaseSensitive="false" />

            <MasterTableView AllowMultiColumnSorting="false"
                             AllowSorting="true" TableLayout="Fixed"
                             IsFilterItemExpanded="false"
                             AllowFilteringByColumn="false"
                             AutoGenerateColumns="false"
                             DataKeyNames="TaskID, RequestedByID"
                             ClientDataKeyNames="TaskID, AssignedToID, DepartmentID, ProjectID, Prj_GenTask"
                             ShowHeadersWhenNoRecords="true">

                <PagerStyle AlwaysVisible="true" Mode="NumericPages" />

                <Columns>
                    <telerik:GridClientSelectColumn HeaderStyle-Width="35px" HeaderText="Checkbox" Reorderable="false" Resizable="false" Groupable="false"></telerik:GridClientSelectColumn>

                    <telerik:GridBoundColumn HeaderText="ID" UniqueName="ID" DataField="SerialNum" HeaderStyle-Width="90px"  HeaderStyle-Wrap="false" SortExpression="SerialNum" ItemStyle-Wrap="false" />

                    <telerik:GridBoundColumn HeaderText="Project" Display="false" DataField="ClientName" HeaderStyle-Width="160px" HeaderStyle-Wrap="false" SortExpression="ClientName" ItemStyle-Wrap="false" />

                    <telerik:GridBoundColumn HeaderText="Last Name" DataField="ClientLName" HeaderStyle-Width="140px" HeaderStyle-Wrap="false" SortExpression="ClientLName" ItemStyle-Wrap="false" />

                    <telerik:GridBoundColumn HeaderText="First Name" DataField="ClientFName" Display="false" HeaderStyle-Width="140px" HeaderStyle-Wrap="false" SortExpression="ClientFName" ItemStyle-Wrap="false" />

                    <telerik:GridBoundColumn HeaderText="Company" DataField="Company" Display="false" HeaderStyle-Width="140px" HeaderStyle-Wrap="false" SortExpression="Company" ItemStyle-Wrap="false" />

                    <telerik:GridBoundColumn HeaderText="Project #" DataField="Pi_Proj_Num" HeaderStyle-Width="90px" HeaderStyle-Wrap="false" SortExpression="Pi_Proj_Num" ItemStyle-Wrap="false" />

                    <telerik:GridBoundColumn HeaderText="Subject" DataField="Subject" HeaderStyle-Width="300px" ItemStyle-VerticalAlign="Top" SortExpression="Subject" ItemStyle-Wrap="false" />

                    <telerik:GridBoundColumn HeaderText="Category" DataField="Category" HeaderStyle-Width="145px" HeaderStyle-Wrap="false" SortExpression="Category" ItemStyle-Wrap="false" />

                    <telerik:GridBoundColumn HeaderText="Subcategory" DataField="Subcategory" HeaderStyle-Width="145px" HeaderStyle-Wrap="false" SortExpression="Subcategory" ItemStyle-Wrap="false" />

                    <telerik:GridBoundColumn HeaderText="Due Date" DataType="System.DateTime" HeaderStyle-Width="125px" DataFormatString="{0:g}" HeaderStyle-Wrap="false" DataField="Drop_Date" SortExpression="Drop_Date" ItemStyle-Wrap="false" />

                    <telerik:GridBoundColumn HeaderText="Requested By" DataField="RequestedBy" HeaderStyle-Width="115px" HeaderStyle-Wrap="false" SortExpression="RequestedBy" ItemStyle-Wrap="false" />

                    <telerik:GridBoundColumn HeaderText="Actual Requester" Display="false" DataField="ActualRequester" HeaderStyle-Width="115px" HeaderStyle-Wrap="false" SortExpression="ActualRequester" ItemStyle-Wrap="false" />

                    <telerik:GridBoundColumn HeaderText="Owner" Display="false" DataField="Owner" HeaderStyle-Width="115px" HeaderStyle-Wrap="false" SortExpression="Owner" ItemStyle-Wrap="false" />

                    <telerik:GridBoundColumn HeaderText="Office" DataField="Office" HeaderStyle-Width="145px" HeaderStyle-Wrap="false" SortExpression="Office" ItemStyle-Wrap="false" />

                    <telerik:GridBoundColumn HeaderText="Original Estimate" DataField="OriginalEstTime" Display="false" HeaderStyle-Width="130px" HeaderStyle-Wrap="false" SortExpression="OriginalEstTime" ItemStyle-Wrap="false" />

                    <telerik:GridBoundColumn HeaderText="Received" DataType="System.DateTime" DataFormatString="{0:g}" HeaderStyle-Width="130px" HeaderStyle-Wrap="false" DataField="Received" SortExpression="Received" ItemStyle-Wrap="false" />

                </Columns>

                <PagerTemplate>
                    <uc1:GridPageTemplate ID="GridPageTemplate1" runat="server" />
                </PagerTemplate>


            </MasterTableView>
            <ClientSettings>
                <ClientEvents OnRowContextMenu="RowContextMenu"></ClientEvents>
            </ClientSettings>
        </telerik:RadGrid>

[Mira]

Hello Hunter,

Could you please try setting the width of all columns except one and let me know whether this helps?

I am looking forward to your reply.

Regards,
Mira
the Telerik team

[Hunter]

So I removed the width from the 'Subject' column and I'm still having the same issue. :( 
Here's a little more information about my configuration. My grid is located in a user control which is dynamically added to a page at runtime. Every things works as expected in both IE and FF. Chrome and Safari appear to be working as expected (reorder columns, selecting, sorting) except for the column width issue. If I were to take a second stab at describing It, the column headers and items display as if they are ignoring the width setting set in the column header style. Column headers display with a moderate amount of padding, left and right, between column headers. The item width for each column seems to follow the width of the largest text value displayed within the column. I hope this helps.
Thank you again for your support. If I should open a support ticket let me know :)

[Mira]

Hello Hunter,

In order to help us provide better and faster support, I recommend that you isolate the problem in a small working project, open a formal support ticket and attach the project to it.

Thank you in advance for the cooperation.

All the best,
Mira
the Telerik team

[Hunter]

Will do! Thank you again for your help! :)

[Hunter]

So after breaking this thing down to something I could send to the Telerik team I finally found what was causing the issue and wanted to post what I have found.

My primary page acts as a container which has user controls dynamically loaded into it. This containing page inherits from my BasePage which, amongst other things, has a check in the Page PreInit for browser type.This was something added ages ago and is thankfully no longer needed. When I removed the following lines of code from my basepage everything now works as expected.

Protected Sub Page_PreInit(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles Me.PreInit

        If InStr(Request.ServerVariables("http_user_agent"), "Safari") Then
            Page.ClientTarget = "uplevel"
        End If

    End Sub