HorizontalAlign issues and CommandTemplate Width

[Roger]

I've tested with and without a master page, with and without our css file, no difference.


If I specify a width on the grid and the mastertableview, the grid isn't centered on the screen.
If I remove the width on the grid it is centered.
If I set UseStaticHeaders="False" the command template is the same width as the mastertableview and centered.
If I set UseStaticHeaders="True" the command tamplate width is 100% of the screen and the mastertableview is centered.

We've never been able to use HorizontalAlign="Center" becuase we've never seen it work as expected, so we've been wrapping out grids in a <table> to center them. 

Is there something I'm missing?

<telerik:RadGrid ID="RadGrid1" HorizontalAlign="Center" runat="server" AllowPaging="false"
        AllowSorting="True" GridLines="None" BorderWidth="0" PageSize="5" BackColor="White"
        GroupingEnabled="False" CellSpacing="0" Width="750">
        <MasterTableView Name="RepMaster" HorizontalAlign="Center" Width="750" CommandItemDisplay="Top"
            BorderStyle="Solid" BorderWidth="1" BorderColor="Black" TableLayout="Fixed">
            <CommandItemTemplate>
                <table border="0" style="width: 100%;">
                    <tr>
                        <td align="left" style="width: 125px;">
                            <asp:Button CausesValidation="false" CommandName="InitInsert" runat="server" ID="btnAddNewRecord"
                                Text=" " title="Add new record" CssClass="rgAdd" />
                            <asp:LinkButton CausesValidation="false" ID="lnkbAddNewRecord" CommandName="InitInsert"
                                runat="server" CssClass="Link">Add new Record</asp:LinkButton>
                        </td>
                        <td align="center">
                        </td>
                        <td align="right" style="width: 125px;">
                            <asp:Button CausesValidation="false" CommandName="RebindGrid" runat="server" ID="btnRefresh"
                                Text=" " title="Refresh" CssClass="rgRefresh" />
                            <asp:LinkButton CausesValidation="false" ID="lnkbRefresh" CommandName="RebindGrid"
                                runat="server" CssClass="Link">Refresh</asp:LinkButton>
                        </td>
                    </tr>
                </table>
            </CommandItemTemplate>
            <CommandItemStyle BackColor="AliceBlue" Width="500" HorizontalAlign="Center" />
            <Columns>
                <telerik:GridTemplateColumn UniqueName="RepMasterEdit" HeaderText="Edit">
                    <HeaderStyle HorizontalAlign="Center" />
                    <ItemStyle HorizontalAlign="Center" />
                    <ItemTemplate>
                        <asp:ImageButton ID="imgbEdit" runat="server" CausesValidation="False" CommandName="Select"
                            CssClass="Link" ImageUrl="~/Images/btnEdit.gif" ToolTip="Edit" />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings EnableRowHoverStyle="True">
            <Selecting AllowRowSelect="True" EnableDragToSelectRows="False"></Selecting>
            <Scrolling AllowScroll="True" ScrollHeight="100%" UseStaticHeaders="true"></Scrolling>
            <ClientEvents OnRowDblClick="RowDblClick" />
        </ClientSettings>
    </telerik:RadGrid>

Private Sub RadGrid1_NeedDataSource(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles RadGrid1.NeedDataSource
       Dim dt As New DataTable
       'Add our columns
       For i As Integer = 0 To 5
           dt.Columns.Add("Field" + i.ToString, GetType(String))
       Next
       Dim row As DataRow
       For r As Integer = 0 To 50
           row = dt.NewRow
           For c As Integer = 0 To 5
               row("Field" + c.ToString) = "Value " + r.ToString
           Next
           dt.Rows.Add(row)
       Next
       Me.RadGrid1.DataSource = dt
   End Sub

[Pavlina]

Hello Roger,

I took the sample code you provided and put it in a sample page following a similar scenario you have.
I am attaching the page for your reference. Check it out and let me know if it works for you.

Greetings,
Pavlina
the Telerik team

[Roger]

I tested your sample in VS2008 and VS2010 and neither one has the grid centered. I added HorizontalAlign="Center" to the grid and hte mastertableview, no change.  The grid is still left aligned on the page.

[Roger]

The below seems to center the grid

div.RadGrid
{
    margin-left: auto !important;
    margin-right: auto !important;
}