ItemStyle-VerticalAlign and ItemStyle-HorizontalAlign is not working

2 posts, 0 answers
  1. THANGA KUMAR
    THANGA KUMAR avatar
    3 posts
    Member since:
    Nov 2009

    Posted 14 Dec 2009 Link to this post

    Hi,

    I am using a Telerik RadGrid in my project.
    The concept is i will use single grid for the whole project.
    In that grid SelectColumn[one checkbox column],Edit and Delete columns are common for all pages.
    Other column will vary based on the page.

    So i have set 'AutoGenerateColumn = true'.
    And i have created 3 static columns i.e) one.GridClientSelectColumn and two GridButtonColumns [one for delete and another one for edit].
    At run time i will bind the grid as 'AutoGeneratecolumn = true' other columns will come based the datasource.

    I have assigned the 'Item-Style' for the Horizontal and Vertical alignments.But it is not working.
    Here is my code in aspx

     <MasterTableView> 
                            <Columns> 
                                <Telerik:GridClientSelectColumn UniqueName="SelectColumn" ItemStyle-HorizontalAlign="Center" 
                                    ItemStyle-VerticalAlign="Middle"
                                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" /> 
                                </Telerik:GridClientSelectColumn> 
                                <Telerik:GridButtonColumn UniqueName="EditColumn" CommandName="View" ButtonType="ImageButton" 
                                    ImageUrl="~/img/Edit.gif" Text="Edit" HeaderText="Edit" ItemStyle-Width="20px" 
                                    HeaderStyle-Width="20px" ItemStyle-HorizontalAlign="Center" Resizable="false" 
                                    Visible="false"
                                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" /> 
                                </Telerik:GridButtonColumn> 
                                <Telerik:GridButtonColumn UniqueName="DeleteColumn" CommandName="Delete" Text="Delete" 
                                    HeaderText="Delete" ButtonType="ImageButton" ImageUrl="~/img/Delete_Telerik.gif" 
                                    ConfirmText="Are you sure you want to delete?" ItemStyle-VerticalAlign="Middle" 
                                    ConfirmTitle="Delete" HeaderStyle-Width="20px" ItemStyle-HorizontalAlign="Center" 
                                    Resizable="false"
                                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" /> 
                                </Telerik:GridButtonColumn> 
                            </Columns> 
                            <NoRecordsTemplate> 
                                <table width="100%" style="height: 75px;" border="0" cellpadding="1" cellspacing="1"
                                    <tr align="left"
                                        <td align="left" valign="middle"
                                            <br /> 
                                            <br /> 
                                            No records to display 
                                        </td> 
                                    </tr> 
                                </table> 
                            </NoRecordsTemplate> 
                        </MasterTableView> 

    But still Select checkbox, Edit image and Delete image and other column Text all are left aligned.
    What is the problem?
    I need to set vertical aligned middle and horizondal aligned center...
    Please give me the solution.

    Thanks,
    Kumar

  2. Dimo
    Admin
    Dimo avatar
    7419 posts
    Member since:
    Sep 2012

    Posted 16 Dec 2009 Link to this post

    Hi Kumar,

    Your code works as expected on my side. Please send a complete runnable demo or inspect your page with some web developer tool such as Firebug. You may see some styles, which override the ones in the RadGrid.

    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     
    <script runat="server">
     
        protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
        {
            DataTable dt = new DataTable();
            DataRow dr;
            int colsNum = 4;
            int rowsNum = 3;
            string colName = "Column";
     
            for (int j = 1; j <= colsNum; j++)
            {
                dt.Columns.Add(String.Format("{0}{1}", colName, j));
            }
     
            for (int i = 1; i <= rowsNum; i++)
            {
                dr = dt.NewRow();
     
                for (int k = 1; k <= colsNum; k++)
                {
                    dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
                }
                dt.Rows.Add(dr);
            }
     
            (sender as RadGrid).DataSource = dt;
        }
         
    </script>
     
    <head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>RadControls for ASP.NET AJAX</title>
    <style type="text/css">
     
    td{height:100px}
     
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
     
    <telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid_NeedDataSource" Skin="Office2007">
        <MasterTableView>
            <Columns>
                <telerik:GridClientSelectColumn UniqueName="SelectColumn" ItemStyle-HorizontalAlign="Center"
                    ItemStyle-VerticalAlign="Middle">
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                </telerik:GridClientSelectColumn>
                <telerik:GridButtonColumn UniqueName="EditColumn" CommandName="View" ButtonType="ImageButton"
                    ImageUrl="~/img/Edit.gif" Text="Edit" HeaderText="Edit"
                    ItemStyle-HorizontalAlign="Center" Resizable="false"
                    Visible="false">
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                </telerik:GridButtonColumn>
                <telerik:GridButtonColumn UniqueName="DeleteColumn" CommandName="Delete" Text="Delete"
                    HeaderText="Delete" ButtonType="ImageButton" ImageUrl="~/img/Delete_Telerik.gif"
                    ConfirmText="Are you sure you want to delete?" ItemStyle-VerticalAlign="Middle"
                    ConfirmTitle="Delete" ItemStyle-HorizontalAlign="Center"
                    Resizable="false">
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                </telerik:GridButtonColumn>
            </Columns>
            <NoRecordsTemplate>
                <table width="100%" style="height: 75px;" border="0" cellpadding="1" cellspacing="1">
                    <tr align="left">
                        <td align="left" valign="middle">
                            <br />
                            <br />
                            No records to display
                        </td>
                    </tr>
                </table>
            </NoRecordsTemplate>
        </MasterTableView>
        <ClientSettings>
            <Selecting AllowRowSelect="true" />
        </ClientSettings>
    </telerik:RadGrid>
     
    </form>
    </body>
    </html>


    Greetings,
    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.

Back to Top