Initial chamber

Step 1: Open Visual Studio 2010 and create an empty Website. Give a suitable name [gridview_demo].

Step 2: In Solution Explorer you will get your empty website, Add a web form, SQL Database. Here are the steps:

For Web Form:

gridview_demo (Your Empty Website) - Right Click, Add New Item, Web Form. Name it gridview_demo.aspx.

For SQL Server Database:

gridview_demo (Your Empty Website) - Right Click, Add New Item, SQL Server Database. [Add Database inside the App_Data_folder].

Database chamber

Step 3: Get to your Database [Database.mdf], we will create two table, then tbl_employee, Go to the database.mdf, Table, Add New table, design your table like this:

Table - tbl_employee [Don’t forget to make ID, Identity Specification - Yes]

Tbl_employee:

table design

Tbl_qualification:

table

Design chamber

Step 4: Now open your gridview_demo.aspx file, where we create our design so that our application works.

gridview_demo.aspx

  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>
  8. </head>
  9. <body>
  10. <form id="form1" runat="server">
  11. <div>
  13. <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
  14. BackColor="White" BorderColor="#999999" BorderStyle="None" BorderWidth="1px"
  15. CellPadding="3" DataKeyNames="id" GridLines="Vertical"
  16. onrowdatabound="GridView1_RowDataBound">
  17. <AlternatingRowStyle BackColor="#DCDCDC" />
  18. <Columns>
  19. <asp:TemplateField HeaderText="Employee ID">
  20. <EditItemTemplate>
  21. <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("id") %>'></asp:TextBox>
  22. </EditItemTemplate>
  23. <ItemTemplate>
  24. <asp:Label ID="Label1" runat="server" Text='<%# Bind("id") %>'></asp:Label>
  25. </ItemTemplate>
  26. </asp:TemplateField>
  27. <asp:TemplateField HeaderText="Emloyee Name">
  28. <EditItemTemplate>
  29. <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("name") %>'></asp:TextBox>
  30. </EditItemTemplate>
  31. <ItemTemplate>
  32. <asp:Label ID="Label2" runat="server" Text='<%# Bind("name") %>'></asp:Label>
  33. </ItemTemplate>
  34. </asp:TemplateField>
  35. <asp:TemplateField HeaderText="Qualification">
  36. <EditItemTemplate>
  37. <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
  38. </EditItemTemplate>
  39. <ItemTemplate>
  40. <asp:DropDownList ID="DropDownList1" runat="server">
  41. </asp:DropDownList>
  42. </ItemTemplate>
  43. </asp:TemplateField>
  44. <asp:TemplateField HeaderText="Employee City">
  45. <EditItemTemplate>
  46. <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("city") %>'></asp:TextBox>
  47. </EditItemTemplate>
  48. <ItemTemplate>
  49. <asp:Label ID="Label4" runat="server" Text='<%# Bind("city") %>'></asp:Label>
  50. </ItemTemplate>
  51. </asp:TemplateField>
  52. </Columns>
  53. <FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
  54. <HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
  55. <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
  56. <RowStyle BackColor="#EEEEEE" ForeColor="Black" />
  57. <SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
  58. <SortedAscendingCellStyle BackColor="#F1F1F1" />
  59. <SortedAscendingHeaderStyle BackColor="#0000A9" />
  60. <SortedDescendingCellStyle BackColor="#CAC9C9" />
  61. <SortedDescendingHeaderStyle BackColor="#000065" />
  62. </asp:GridView>
  64. </div>
  65. </form>
  66. </body>
  67. </html>
Your design looks like the following image:

design

Code chamber

Step 5: Open gridview_demo.aspx.cs and write some code so that our application works.
  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. SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
  13. protected void Page_Load(object sender, EventArgs e)
  14. {
  15. if (!Page.IsPostBack)
  16. {
  17. refreshdata();
  18. }
  19. }
  23. public void refreshdata()
  24. {
  26. con.Open();
  28. SqlCommand cmd = new SqlCommand("select * from tbl_employee", con);
  29. SqlDataAdapter sda = new SqlDataAdapter(cmd);
  30. DataTable dt = new DataTable();
  31. sda.Fill(dt);
  32. con.Close();
  33. GridView1.DataSource = dt;
  34. GridView1.DataBind();
  38. }
  40. protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
  41. {
  42. if (e.Row.RowType == DataControlRowType.DataRow)
  43. {
  44. con.Open();
  45. DropDownList DropDownList1 = (e.Row.FindControl("DropDownList1") as DropDownList);
  48. SqlCommand cmd = new SqlCommand("select * from tbl_qualification", con);
  49. SqlDataAdapter sda = new SqlDataAdapter(cmd);
  50. DataTable dt = new DataTable();
  51. sda.Fill(dt);
  52. con.Close();
  53. DropDownList1.DataSource = dt;
  55. DropDownList1.DataTextField = "qualification";
  56. DropDownList1.DataValueField = "qualification";
  57. DropDownList1.DataBind();
  58. DropDownList1.Items.Insert(0, new ListItem("--Select Qualification--", "0"));
  61. }
  63. }
  64. }
Output chamber

Output

dropdown list

Hope you liked this. Thank you for reading. Have a good day.