how to right justify and format the column in a datatable

Question

I have a datatable that is created in code behind. I need to right justify the number column and I also want to bold the last column of the datatable with a dollar sign in the beginning. I aslo need to put commas for the numbers. below is my cs page code:

DataTable dt = new DataTable("Table");
dt.Columns.Add(new DataColumn("Title"));
dt.Columns.Add(new DataColumn("Number));
dt.Rows.Add("Number", 12.3);
dt.Rows.Add("Pages", 45789);
dt.Rows.Add("requirements", 23456);
dt.Rows.Add("Price", 12);
dt.Rows.Add("Property", 25);
dt.Rows.Add("test1", 0);
dt.Rows.Add("Total", total);
grdCalculate.DataSource = dt;
grdCalculate.DataBind();

below is my .aspx page code:

<asp:GridView ID="grdCalculate" runat="server" GridLines="Horizontal" CssClass="grid"></asp:GridView>

below is something, I want:

Answer 1

Hi @Adarsh Gupta ,
There are two ways about your these problems.You could use Jquery or codes.

right justify the number column

Code:

 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)  
        {  
            if (e.Row.RowType == DataControlRowType.DataRow)  
            {  
                e.Row.Cells[1].Attributes.Add("align", "right"); // right justify the number column  
            }  
        }  

Jquery:

 <s cript src="Scripts/jquery-3.6.0.min.js"></s cript>  
    <s cript>  
        $(function () {  
            $(".totalcell").css("text-align", "right");  
        })  
    </script>  

bold the last column

protected void Page_Load(object sender, EventArgs e)  
        {  
            if (!IsPostBack)  
            {  
                DataTable dt = new DataTable();  
                dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Id", typeof(int)),  
                    new DataColumn("num", typeof(int)) });  
                dt.Rows.Add(1, 100);  
                dt.Rows.Add(2, 100);  
                dt.Rows.Add(3, 1000);  
                GridView1.DataSource = dt;  
                GridView1.DataBind();  
  
                if (GridView1.Rows.Count > 0)  
                {  
                    GridView1.Rows[GridView1.Rows.Count - 1].Font.Bold = true;   //Blod the last row  
                }  
            }  
        }  

Jquery:

 <s cript src="Scripts/jquery-3.6.0.min.js"></s cript>  
    <s cript>  
        $(function () {  
            $("#GridView1 tr:last .totalcell").css("font-weight", "Bold");  
        })  
    </script>  

put commas for the numbers

 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)  
        {  
            if (e.Row.RowType == DataControlRowType.DataRow)  
            {  
                e.Row.Cells[1].Text = Int32.Parse(e.Row.Cells[1].Text).ToString("n0"); //put commas for the numbers field  
            }  
        }  

Jquery:

<s cript src="Scripts/jquery-3.6.0.min.js"></s cript>  
    <s cript>  
        $(function () {  
            $("#GridView1 tr td:nth-child(2)").each(function () {  
                var num = $(this).text();  
                var commaNum = numberWithCommas(num);  
                $(this).text(commaNum);  
            })  
  
        })  
        function numberWithCommas(number) {  
            var parts = number.toString().split(".");  
            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");  
            return parts.join(".");  
        }  
    </script>  

Or you could add in your gridview.
If it's a BoundField, you could use:

 <asp:BoundField DataField="num" HeaderText="num" ItemStyle-CssClass="totalcell" DataFormatString="{0:N0}" />  

If it's a TemplateField, try:

<ItemTemplate>  
   <asp:Label ID="Label3" runat="server" Text='<%# Eval("num").ToString("N0") %>'></asp:Label>  
</ItemTemplate>  

106431-new-text-document-3.txt
Best regards,
Yijing Sun

---

If the answer is helpful, please click "Accept Answer" and upvote it.

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.