Attempting to align contents of GridView cells on ASP.NET Web Forms

Question

Hello,

I am attempting to align the contents of GridView cells on ASP.NET Web Forms, but I am encountering an issue where the GridView header is not aligning as expected. Here is how it looks in the image below

saved

What steps can be taken to resolve this, please?

Here is the code I have tried:

HTML

C#

protected void Page_Load(object sender, EventArgs e)
        {
            GetData();
        }
        private void GetData()
        {
            if (!this.IsPostBack)
            {
                DataTable dt = new DataTable();
                dt.Columns.AddRange(new DataColumn[4] {
                            new DataColumn("Item", typeof(string)),
                            new DataColumn("Qty", typeof(string)),
                            new DataColumn("Rate", typeof(string)),
                            new DataColumn("Amount",typeof(string)) });
                dt.Rows.Add("Flight Ticket", "1", "132,000.00", "132,000.00");
                dt.Rows.Add("Service Charge", "1", "3,000.00", "3,000.00");
                dt.Rows.Add("Online Fees", "1", "1,000.00", "1,000.00");
                Gridview2.DataSource = dt;
                Gridview2.DataBind();
            }
        }

protected void Gridview1_RowDataBound (object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.Header)
            {
                e.Row.Cells[1].HorizontalAlign = HorizontalAlign.Center;
                e.Row.Cells[2].HorizontalAlign = HorizontalAlign.Right;
                e.Row.Cells[3].HorizontalAlign = HorizontalAlign.Right;
            }
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.Cells[1].HorizontalAlign = HorizontalAlign.Center;
                e.Row.Cells[2].HorizontalAlign = HorizontalAlign.Right;
                e.Row.Cells[3].HorizontalAlign = HorizontalAlign.Right;
            }
        }

Answer

Maybe there is a mistake in my code, that I am yet to see

The markup handler name "OnRowDataBound="Gridview2_RowDataBound"" does not match the actual C# handler named "Gridview1_RowDataBound". Please use the Visual Studio debugger to verify the logic flow.

I would use template fields to control the individual column styles in the markup using standard CSS rather than code the behind.

Answer

Hi @Donald Symmons,

About the markup handler name, that's a mistake I did.

After this modification it should work fine, right?

Below is my test.

 protected void Page_Load(object sender, EventArgs e)
 {
     GetData();
 }
 private void GetData()
 {
     if (!this.IsPostBack)
     {
         DataTable dt = new DataTable();
         dt.Columns.AddRange(new DataColumn[4] {
                     new DataColumn("Item", typeof(string)),
                     new DataColumn("Qty", typeof(string)),
                     new DataColumn("Rate", typeof(string)),
                     new DataColumn("Amount",typeof(string)) });
         dt.Rows.Add("Flight Ticket", "1", "132,000.00", "132,000.00");
         dt.Rows.Add("Service Charge", "1", "3,000.00", "3,000.00");
         dt.Rows.Add("Online Fees", "1", "1,000.00", "1,000.00");
         Gridview2.DataSource = dt;
         Gridview2.DataBind();
     }
 }
 protected void Gridview2_RowDataBound(object sender, GridViewRowEventArgs e)
 {
     if (e.Row.RowType == DataControlRowType.Header)
     {
         e.Row.Cells[0].HorizontalAlign = HorizontalAlign.Left;
         e.Row.Cells[1].HorizontalAlign = HorizontalAlign.Center;
         e.Row.Cells[2].HorizontalAlign = HorizontalAlign.Right;
         e.Row.Cells[3].HorizontalAlign = HorizontalAlign.Right;
     }
     if (e.Row.RowType == DataControlRowType.DataRow)
     {
         e.Row.Cells[0].HorizontalAlign = HorizontalAlign.Left;
         e.Row.Cells[1].HorizontalAlign = HorizontalAlign.Center;
         e.Row.Cells[2].HorizontalAlign = HorizontalAlign.Right;
         e.Row.Cells[3].HorizontalAlign = HorizontalAlign.Right;
     }
 }

User's image

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread

Answer

I suggest not using the event handler such as Gridview1_RowDataBound shown.

Instead, please try using the designer of Visual Studio to set the styles to the columns of GridView as shown below:

GridView2

The resultant .aspx is shown below:

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="WebForm49.aspx.cs" Inherits="WebForms1.WebForm49" %>

The above shows the GridView on browser as follows:

GridView3

Share via

Attempting to align contents of GridView cells on ASP.NET Web Forms

3 answers

Your answer