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
    7848 posts

    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