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

[Solved] Setting HorizontalAlign makes a monkey out of your Grid

3 Answers 58 Views

Grid

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

Stuart Hemming asked on 02 Jun 2009, 12:06 PM

Here's one you can try at home.

Create a page with a grid and a datasource. Add a toolbar as the commanditem for your grid.

Here's one I prepared earlier ...

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="WebApplication1.WebForm6" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"> 
        
                <title></title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                </telerik:RadScriptManager> 
        
                <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" GridLines="None" Skin="WebBlue" Width="100%"> 
        
            <MasterTableView DataSourceID="SqlDataSource1" CommandItemDisplay="Top" DataKeyNames="ProductID"> 
        
                <CommandItemTemplate> 
        
                <telerik:RadToolBar runat="server" ID="GridCommandItemToolbar" AutoPostBack="false" Skin="Office2007"  Style="width: 100%" Visible="true"> 
        
                  <CollapseAnimation Duration="200" Type="OutQuint" /> 
        
                  <Items> 
        
                    <telerik:RadToolBarButton runat="server" Enabled="false" ToolTip="Add Document" Value="AddDocument" CommandName="InitInsert" ImageUrl="~/Images/Office/document_file/png/16/document_add_16x16.png"> 
        
                    </telerik:RadToolBarButton> 
        
                    <telerik:RadToolBarButton runat="server" Enabled="false" ToolTip="Edit Document" Value="EditDocument" ImageUrl="~/Images/Office/document_file/png/16/document_edit_16x16.png"> 
        
                    </telerik:RadToolBarButton> 
        
                    <telerik:RadToolBarButton runat="server" Enabled="false" ToolTip="Delete Document" Value="DeleteDocument" ImageUrl="~/Images/Office/document_file/png/16/document_delete_16x16.png"> 
        
                    </telerik:RadToolBarButton> 
        
                  </Items> 
        
                </telerik:RadToolBar> 
        
              </CommandItemTemplate> 
        
            <RowIndicatorColumn> 
        
            <HeaderStyle Width="20px"></HeaderStyle> 
        
            </RowIndicatorColumn> 
        
            <ExpandCollapseColumn> 
        
            <HeaderStyle Width="20px"></HeaderStyle> 
        
            </ExpandCollapseColumn> 
        
              <Columns> 
        
                <telerik:GridBoundColumn DataField="ProductID" DataType="System.Int32" HeaderText="ProductID" ReadOnly="True" SortExpression="ProductID" UniqueName="ProductID"> 
        
                </telerik:GridBoundColumn> 
        
                <telerik:GridBoundColumn DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" UniqueName="ProductName"> 
        
                </telerik:GridBoundColumn> 
        
              </Columns> 
        
            </MasterTableView> 
        
                  <ClientSettings> 
        
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" /> 
        
                  </ClientSettings> 
        
                </telerik:RadGrid> 
        
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWIND.MDFConnectionString %>" SelectCommand="SELECT [ProductID], [ProductName] FROM [Current Product List]"></asp:SqlDataSource> 
        
                </form> 
        
            </body> 
        
            </html>

Run the page and all should be well.

Now, on Line 15 add HorizontalAlign="Left". Run the project again. You'll find, if you're seeing what we're seeing, that your data and headers are all off to the right of your commanditem. You get equally odd results using "Right" or "Center" as the values for HorizontalAlign.

I discovered this by after first running someone else's code after applying SP2.

--
Stuart

3 Answers, 1 is accepted

answered on 02 Jun 2009, 12:42 PM

Hi Stuart,

HorizontalAlign="Left" produces an align="left" HTML attribute. Apart from being deprecated and rather old fashioned, this attribute produces various confusing results when used on more complex block-level elements, because it introduces behavior similar to CSS floats.

We don't recommend using this property for the RadGrid control. You can use it for RadGrid columns, to align text in the table cells.

Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.