[Solved] Centering Radgrid on RadDock

[Manuel Ortiz]

Hi, I have a radgrid inside a raddock which I am trying to center but it is always left aligned.  I tried with the horizontal-align property set to "center" but it wont work.  Also, everything inside the contenttemplate of the raddock is inside a division which has the text-align property set to centered.  What else can I do to center my grid?? Here is the code if you need it...

Thanx,
Manuel

<asp:Content ID="Content1" ContentPlaceHolderID="HeadPlaceholder" Runat="Server">
    <style type="text/css">
    td
    {
        vertical-align:top;
    }

    .docContent
    {
        text-align:center;
        font-weight:bold;
        font-size:larger;

    }

    #rdClearCaches .rdTitlebar
    {
        background:#c4f2f9;
    }

        </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainColumnPlaceholder" Runat="Server">

    <h1>System Administrator Utilities</h1>
    <div style="margin:10px auto 10px; width:1000px;">
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server" Skin="Default">
        <table cellpadding="0" cellspacing="0">
        <tr>
            <td style="width:350px;">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="100px">
                    <telerik:RadDock ID="rdClearCaches" runat="server" Title="CLEAR DB CACHE"
                        EnableAnimation="True" BackColor="#242424" Width="325px"
                        ForeColor="#D7D7C2">
                    <ContentTemplate>
                        <div class="docContent">
                            <br />

                            <telerik:RadGrid ID="rgCaches" runat="server"
                                GridLines="None" Skin="Black" Width="98%" AutoGenerateColumns="False"
                                AllowSorting="True" Font-Bold="False" Font-Italic="False" Font-Overline="False"
                                Font-Strikeout="False" Font-Underline="False" HorizontalAlign="Center">
                                <MasterTableView>
                                    <RowIndicatorColumn>
                                        <HeaderStyle Width="20px" />
                                    </RowIndicatorColumn>
                                    <ExpandCollapseColumn>
                                        <HeaderStyle Width="20px" />
                                    </ExpandCollapseColumn>
                                    <Columns>
                                        <telerik:GridBoundColumn DataField="Key" HeaderText="KEY" UniqueName="Key">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridDateTimeColumn DataField="Created" HeaderText="CREATED ON"
                                            UniqueName="Created">
                                        </telerik:GridDateTimeColumn>
                                    </Columns>
                                    <HeaderStyle Font-Bold="True" Font-Italic="False" Font-Overline="False"
                                        Font-Strikeout="False" Font-Underline="False" HorizontalAlign="Center"
                                        Wrap="True" />
                                </MasterTableView>
                            </telerik:RadGrid>

                            <br />
                            Press &quot;Clear&quot; to Delete All Cache<br />&nbsp;
                            <div>
                                <asp:Button ID="btnClearCache" runat="server" Text="Clear" Width="200px" />
                            </div>

                        </div>
                    </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </td>



            <td style="width:350px;">
                <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="100px">
                    <telerik:RadDock ID="RadDock1" runat="server" Title="Title2"
                        EnableAnimation="True" BackColor="Black" ForeColor="White" Width="325px">
                    <ContentTemplate>
                        <div class="docContent">
                        <br />Text<br />
                        <div>
                            <br />
                            <asp:Button ID="Button1" runat="server" Text="Clear" Width="200px" />
                        </div>
                        </div>
                    </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </td>



            <td style="width:350px;">
                <telerik:RadDockZone ID="RadDockZone3" runat="server" MinHeight="100px" >
                    <telerik:RadDock ID="RadDock2" runat="server" Title="Title3"
                        EnableAnimation="True" BackColor="White" Width="325px">
                    <ContentTemplate>
                        <div class="docContent">
                        <br />Text<br />
                        <div>
                            <br />
                            <asp:Button ID="Button2" runat="server" Text="Clear" Width="200px" />
                        </div>
                        </div>
                    </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </td>
        </tr>
        </table>

        </telerik:RadDockLayout>


    </div>
    <asp:Panel ID="pnlTimerCacheGrid" runat="server">
        <asp:Timer ID="TimerCacheGrid" runat="server" Interval="10000" OnTick="TimerCacheGrid_Tick" />
    </asp:Panel>
    <telerik:RadAjaxManager runat="server"
        DefaultLoadingPanelID="RadAjaxLoadingPanel1" EnablePageHeadUpdate="False">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="TimerCacheGrid">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rgCaches" />
                </UpdatedControls>
            </telerik:AjaxSetting>

            <telerik:AjaxSetting AjaxControlID="rgCaches">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rgCaches" />
                </UpdatedControls>
            </telerik:AjaxSetting>

            <telerik:AjaxSetting AjaxControlID="btnClearCache">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rgCaches" />
                </UpdatedControls>
            </telerik:AjaxSetting>

        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel Runat="server" Skin="Black"
        ID="RadAjaxLoadingPanel1" InitialDelayTime="100">
    </telerik:RadAjaxLoadingPanel>

    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server"
        DecoratedControls="All" Skin="Default" EnableRoundedCorners="true"  />

        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
    </telerik:RadStyleSheetManager>
</asp:Content>

[Dimo]

Hi Manuel,

The text-align CSS property is intended for centering inline elements, while RadGrid is a block-level element.

Block-level elements are centered by setting some width (which should be smaller than the container's width) and "auto" left and right margin.

<div  style="width:700px">
      <telerik:RadGrid  Width="500px"  style="margin:0 auto"  />
</div>


All the best,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.