ItemStyle-VerticalAlign and ItemStyle-HorizontalAlign is not working

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

    Posted 14 Dec 2009 Link to this post


    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

                                <Telerik:GridClientSelectColumn UniqueName="SelectColumn" ItemStyle-HorizontalAlign="Center" 
                                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" /> 
                                <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" 
                                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" /> 
                                <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" 
                                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" /> 
                                <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 

    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.


  2. Dimo
    Dimo avatar
    7753 posts
    Member since:
    Mar 2015

    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);
            (sender as RadGrid).DataSource = dt;
    <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">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid_NeedDataSource" Skin="Office2007">
                <telerik:GridClientSelectColumn UniqueName="SelectColumn" ItemStyle-HorizontalAlign="Center"
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                <telerik:GridButtonColumn UniqueName="EditColumn" CommandName="View" ButtonType="ImageButton"
                    ImageUrl="~/img/Edit.gif" Text="Edit" HeaderText="Edit"
                    ItemStyle-HorizontalAlign="Center" Resizable="false"
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                <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"
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                <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
            <Selecting AllowRowSelect="true" />

    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