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

ItemStyle-VerticalAlign and ItemStyle-HorizontalAlign is not working

1 Answer 569 Views
Grid
This is a migrated thread and some comments may be shown as answers.
THANGA KUMAR
Top achievements
Rank 1
THANGA KUMAR asked on 14 Dec 2009, 01:28 PM
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

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 16 Dec 2009, 03:00 PM
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.
Tags
Grid
Asked by
THANGA KUMAR
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or