hyperlink column header alignment in client-side bound grid

[Albert Shenker]

I have a grid with the following declaration. The grid is bound client-side. For some reason, I can't get the HyperlinkColumn to display its text centered. (see attached image). Any idea why?

 

<telerik:RadGrid id="rgCEE"
                                        runat="server"
                                        AutoGenerateColumns="False"
                                        Height="100%"
                                        Width="100%"
                                        AllowPaging="False"
                                        AllowSorting="False"
                                        EnableLinqExpressions="false"
                                        ShowStatusBar="False"
                                        style="border:0px;"

                                >
                                    <MasterTableView
                                                DataKeyNames="EmployeeId"
                                                ClientDataKeyNames="EmployeeId"
                                                Width="100%"
                                                TableLayout="Fixed"
                                                HierarchyLoadMode="Client"
                                                CommandItemDisplay="None"
                                        >
                                        <Columns>
                                            <telerik:GridHyperlinkColumn UniqueName="SelectColumn" Text="Select" DataNavigateUrlFields="EmployeeId" DataNavigateUrlFormatString="javascript:SelectExistingEmployee_CO({0});"  >
                                                <HeaderStyle Width="100px" HorizontalAlign="Center" />
                                                <ItemStyle HorizontalAlign="Center" />
                                            </telerik:GridHyperlinkColumn>

                                            <telerik:GridDateTimeColumn HeaderText="Born" DataField="BirthDate" DataType="System.DateTime" DataFormatString="{0:MM/dd/yy}">
                                                <HeaderStyle width="80px" HorizontalAlign="Left" ></HeaderStyle>
                                                <ItemStyle HorizontalAlign="Left" VerticalAlign="Middle"></ItemStyle>
                                            </telerik:GridDateTimeColumn>

                                            <telerik:GridTemplateColumn UniqueName="spacerCol"></telerik:GridTemplateColumn>
                                        </Columns>
                                        <CommandItemTemplate>

                                        </CommandItemTemplate>

                                    </MasterTableView>

                                    <ClientSettings AllowExpandCollapse="True" >
                                        <Selecting AllowRowSelect="False" EnableDragToSelectRows="False"  />
                                        <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="100%" />
                                        <Resizing AllowColumnResize="False" EnableRealTimeResize="True" ResizeGridOnColumnResize="True"/>
                                        <ClientEvents OnGridCreated="rgCEECreatedHandler_CO"/>
                                    </ClientSettings>

                                </telerik:RadGrid>

[Konstantin Dikov]

Hi Albert,

I have tested the column configuration on my side and everything seems to work correctly and the anchor element is centered within the cell. Could you please inspect the generated TD element and the applied styles and see if the "center" value is added?

On a side note, you could try to add custom CSS class to the TD element and see if that makes any difference:

<telerik:GridHyperLinkColumn UniqueName="SelectColumn" Text="Select" DataNavigateUrlFields="EmployeeId"
    DataNavigateUrlFormatString="javascript:SelectExistingEmployee_CO({0});">
    <HeaderStyle Width="100px" HorizontalAlign="Center" />
    <ItemStyle CssClass="hyperlinkcolumn" />
</telerik:GridHyperLinkColumn>

...


.hyperlinkcolumn {
    text-align: center;
}

Looking forward to your reply with the result.


Regards,
Konstantin Dikov
Telerik