Post
Ask Question

How to Display the Rupee Symbol With Employee Salary in ASP.Net GridView

Scenario

Consider a table named Employees having the columns Id, Name, Designation and Salary and you were asked to display all the data on a web page. Also the salary should be displayed with the India Currency Symbol prefixed to it. The layout of the table is as follows:

table

The requirement is quite simple and can be done using a GridView. The data can simply be displayed over a web page using a Grid View. The following code shows how to display the data using a Web Form (EmployeeDetails.aspx) and a Grid View.

The following is the EmployeeDetails.aspx page:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EmployeeDetails.aspx.cs" Inherits="GridView.EmployeeDetails" %>   
  2. <!DOCTYPE html>   
  3. <html xmlns="http://www.w3.org/1999/xhtml">   
  4. <head runat="server">   
  5.     <title>Employee Details</title>   
  6. </head>   
  7.   
  8. <body>   
  9.     <form id="form1" runat="server">   
  10.     <div>   
  11.         <h3>Employee Details</h3>   
  12.         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">   
  13.             <Columns>   
  14.                 <asp:BoundField DataField="Id" HeaderText="Id" />   
  15.                 <asp:BoundField DataField="Name" HeaderText="Name" />   
  16.                 <asp:BoundField DataField="Designation" HeaderText="Designation" />   
  17.                 <asp:BoundField DataField="Salary" HeaderText="Salary"  />   
  18.             </Columns>   
  19.   
  20.         </asp:GridView>   
  21.     </div>   
  22.     </form>   
  23. </body>   
  24. </html>  

The following is the EmployeeDetails.cs page:

  1. using System;   
  2. using System.Collections.Generic;   
  3. using System.Configuration;   
  4. using System.Data.SqlClient;   
  5. using System.Linq;   
  6. using System.Web;   
  7. using System.Web.UI;   
  8. using System.Web.UI.WebControls;   
  9.    
  10. namespace GridView   
  11. {   
  12.     public partial class EmployeeDetails : System.Web.UI.Page   
  13.     {   
  14.         protected void Page_Load(object sender, EventArgs e)   
  15.         {   
  16.             string connect = ConfigurationManager.ConnectionStrings["SQLConnect"].ConnectionString;   
  17.             string query = "SELECT * from Employees;";
  18.    
  19.             using(SqlConnection con = new SqlConnection(connect))   
  20.             {   
  21.                 SqlCommand cmd = new SqlCommand(query, con);   
  22.                 con.Open();   
  23.                 SqlDataReader dr = cmd.ExecuteReader();   
  24.    
  25.                 GridView1.DataSource = dr;   
  26.                 GridView1.DataBind();   
  27.             }   
  28.         }   
  29.     }   
  30. }  

It should be noted that the ADO.Net code is not optimized here and is used only for this demo. In real projects, Stored Procedures and other conventions should be used for the query. Now run the application and the output is as follows:

EmployeeDetails

The preceding image shows all the data from the database to a grid view control but our requirement is to display the currency symbol with the Salary to make the data more readable. To do this, we can benefit from a quick fix by adding property the DataFormatString to the Bound Field of the grid view as follows:

EmployeeData.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=" EmployeeDetails.aspx.cs" Inherits="GridView. EmployeeDetails " %>   
  2. <!DOCTYPE html>   
  3. <html xmlns="http://www.w3.org/1999/xhtml">   
  4. <head runat="server">   
  5.     <title>Employee Details</title>   
  6. </head>   
  7. <body>   
  8.     <form id="form1" runat="server">   
  9.     <div>   
  10.         <h3>Employee Details</h3>   
  11.         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">   
  12.             <Columns>   
  13.                 <asp:BoundField DataField="Id" HeaderText="Id" />   
  14.                 <asp:BoundField DataField="Name" HeaderText="Name" />   
  15.                 <asp:BoundField DataField="Designation" HeaderText="Designation" />   
  16.                 <asp:BoundField DataField="Salary" HeaderText="Salary" DataFormatString="{0:c}" />   
  17.             </Columns>   
  18.    
  19.         </asp:GridView>   
  20.     </div>   
  21.     </form>   
  22. </body>   
  23. </html>  

If we run the application now, it displays the output as:

output

You have noticed that the $ sign is prefixed with the Salary values. Our requirement is to display the Rupee sign with the Salary but it shows the $ symbol. Can you guess why that is?

This is because we asked the Grid View to format the Salary column and append the default currency symbol from the culture language system with it. The default language of my OS is "en-US", in other words United States-English and the currency symbol for USA is $ (dollar). This is the reason it appends the $ sign with Salary values.

As in our requirement, we need to tweak the language settings from United States to India and to specify the currency symbol for Indian Rupee. The HTML encoded value of Indian rupee is "₹” To do this, go to the EmployeeDetails.cs page and override the InitializeCulture method as follows:

  1. using System;   
  2. using System.Collections.Generic;   
  3. using System.Configuration;   
  4. using System.Data.SqlClient;   
  5. using System.Globalization;   
  6. using System.Linq;   
  7. using System.Threading;   
  8. using System.Web;   
  9. using System.Web.UI;   
  10. using System.Web.UI.WebControls;   
  11.    
  12. namespace GridView   
  13. {   
  14.     public partial class EmployeeDetails : System.Web.UI.Page   
  15.     {   
  16.         protected void Page_Load(object sender, EventArgs e)   
  17.         {   
  18.             string connect = ConfigurationManager.ConnectionStrings["SQLConnect"].ConnectionString;   
  19.             string query = "SELECT * from Employees;"; 
  20.   
  21.             using(SqlConnection con = new SqlConnection(connect))   
  22.             {   
  23.                 SqlCommand cmd = new SqlCommand(query, con);   
  24.                 con.Open();   
  25.                 SqlDataReader dr = cmd.ExecuteReader();   
  26.    
  27.                 GridView1.DataSource = dr;   
  28.                 GridView1.DataBind();   
  29.             }   
  30.         }   
  31.    
  32.         protected override void InitializeCulture()   
  33.         {   
  34.             CultureInfo ci = new CultureInfo("en-IN");   
  35.             ci.NumberFormat.CurrencySymbol = "₹";   
  36.             Thread.CurrentThread.CurrentCulture = ci;   
  37.                
  38.             base.InitializeCulture();   
  39.         }   
  40.     }   
  41. }   
  42.   

Also add the HtmlEncode="false" to the bound filed of the GridView:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=" EmployeeDetails.aspx.cs" Inherits="GridView. EmployeeDetails" %>   
  2. <!DOCTYPE html>   
  3.    
  4. <html xmlns="http://www.w3.org/1999/xhtml">   
  5. <head runat="server">   
  6.     <title>Employee Details</title>   
  7. </head>   
  8. <body>   
  9.     <form id="form1" runat="server">   
  10.     <div>   
  11.         <h3>Employee Details</h3>   
  12.         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">   
  13.             <Columns>   
  14.                 <asp:BoundField DataField="Id" HeaderText="Id" />   
  15.                 <asp:BoundField DataField="Name" HeaderText="Name" />   
  16.                 <asp:BoundField DataField="Designation" HeaderText="Designation" />   
  17.                 <asp:BoundField DataField="Salary" HeaderText="Salary" DataFormatString="{0:c}" HtmlEncode="false" />   
  18.             </Columns>   
  19.    
  20.         </asp:GridView>   
  21.     </div>   
  22.     </form>   
  23. </body>   
  24. </html>   
  25.   

If you run the application now, you'll see the Rupee symbol along with the Salary of each employee.

Salary of each employee

Conclusion

Your feedback and constructive criticism is always appreciated, keep it coming. Until then, try to put a ding in the Universe!


Similar Articles