Initial Chamber

Step 1: Open Visual Studio 2010 and create an empty website, give it a suitable name (DataList_demo).

Step 2: In Solution Explorer, you will get your empty website, add a web form, SQL Database and proceed as in the following.

For Web Form

Gridviewrow_demo (your empty website): Right-click, Add New Item, then select Web Form and name it gridview_demo.aspx.

For SQL Server Database:

gridview_demo (your empty website): Right-click, Add New Item, then select SQL Server Database (add a database inside the App_Data_folder).

Database Chamber

Step 3: In Server Explorer, click on your database (Database.mdf), then Tables and Add New Table. Create the table as in the following.

Table: tbl_std (Don't forget to make ID as IS Identity : True.)

Table

Add some values to the database by going as in the following: Database.mdf, Tables, then go to tbl_std and right-click to show the table data. Now, add some data to the database.

Design Chamber

Step 4: Open your design page (aspx page), gridview_demo.aspx and write the following code:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <title></title>
  10. <style type="text/css">
  11. .style1
  12. {
  13. width: 268px;
  14. }
  15. .style2
  16. {
  17. text-decoration: underline;
  18. font-size: x-large;
  19. }
  20. .style3
  21. {
  22. width: 345px;
  23. }
  24. .style4
  25. {
  26. text-align: left;
  27. }
  28. </style>
  31. </head>
  32. <body>
  33. <form id="form1" runat="server">
  34. <div>
  36. <div>
  38. <br />
  39. <br />
  40. </div>
  41. </div>
  42. <p>
  43. </p>
  44. <table style="width:100%;">
  45. <caption class="style4">
  46. <span class="style2"><strong>RowdataBound in Gridview</strong></span><br />
  47. </caption>
  48. <tr>
  49. <td class="style1">
  50. </td>
  51. <td class="style3">
  52. </td>
  53. <td>
  54. </td>
  55. </tr>
  56. <tr>
  57. <td class="style1">
  59. <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
  60. BackColor="White" BorderColor="White" BorderStyle="Ridge" BorderWidth="2px"
  61. CellPadding="3" CellSpacing="1" GridLines="None"
  62. onrowdatabound="GridView1_RowDataBound1">
  63. <Columns>
  64. <asp:BoundField DataField="id" HeaderText="Std_id" />
  65. <asp:BoundField DataField="stdname" HeaderText="Student name" />
  66. <asp:BoundField DataField="stdsubject" HeaderText="Subject" />
  67. <asp:BoundField DataField="result" HeaderText="Result" />
  68. </Columns>
  69. <FooterStyle BackColor="#C6C3C6" ForeColor="Black" />
  70. <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#E7E7FF" />
  71. <PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />
  72. <RowStyle BackColor="#DEDFDE" ForeColor="Black" />
  73. <SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
  74. <SortedAscendingCellStyle BackColor="#F1F1F1" />
  75. <SortedAscendingHeaderStyle BackColor="#594B9C" />
  76. <SortedDescendingCellStyle BackColor="#CAC9C9" />
  77. <SortedDescendingHeaderStyle BackColor="#33276A" />
  78. </asp:GridView>
  80. </td>
  81. <td class="style3">
  82. </td>
  83. <td>
  84. </td>
  85. </tr>
  86. <tr>
  87. <td class="style1">
  88. </td>
  89. <td class="style3">
  90. </td>
  91. <td>
  92. </td>
  93. </tr>
  94. </table>
  95. </form>
  96. </body>
  97. </html>
You can even manually add this thing by going to your GridView in design mode. Now clicking on the arrow sign of the GridView, it will open your template option window where you need to add the column that you want to show in the GridView. Make a column in the GridView by going to the Template window, then Available fields, select 3 bound fields and add them.

Add

Name the bound fields by going to Bound Fields Properties, then Header Text and name it as in the following:

Bound Fields Header Text Data Fields
Std_id Std_id id
Student Name Student Name stdname
Subject Subject stdsubject
Result Result result

Header Text

Add all these things and uncheck the Auto Generate Fields. Now after pressing OK, you can see the design as in the following:

Auto Generate Fields

Code Chamber:

Step 5: Open your gridview_demo.aspx.cs page. Here we will code to get a result less than 35 that will make the color Red and otherwise Blue.

First add some namespaces to the page.

Add some Namespace to the page

Here is the code for your application:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.Data;
  8. using System.Data.SqlClient;
  10. public partial class _Default : System.Web.UI.Page
  11. {
  12. protected void Page_Load(object sender, EventArgs e)
  13. {
  14. if (!Page.IsPostBack)
  15. {
  16. refreshdata();
  17. }
  19. }
  21. public void refreshdata()
  22. {
  24. SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
  25. SqlCommand cmd = new SqlCommand("select * from tbl_std", con);
  26. SqlDataAdapter sda = new SqlDataAdapter(cmd);
  27. DataTable dt = new DataTable();
  28. sda.Fill(dt);
  29. GridView1.DataSource = dt;
  30. GridView1.DataBind();
  35. }
  37. protected void GridView1_RowDataBound1(object sender, GridViewRowEventArgs e)
  38. {
  39. try
  40. {
  41. if (e.Row.RowType == DataControlRowType.DataRow)
  42. {
  43. int result;
  44. if (int.TryParse(e.Row.Cells[3].Text, out result))
  45. {
  46. if (result < 35)
  47. e.Row.Cells[3].ForeColor = System.Drawing.Color.Red;
  48. else
  49. e.Row.Cells[3].ForeColor = System.Drawing.Color.Navy;
  50. }
  51. }
  52. }
  53. catch
  54. {
  56. }
  57. }
  58. }
Output Chamber
Output

I hope you liked it. Thank you for reading. Have a good day!