Intorduction

In this article, we will learn how we can create a multirow header in grid view. I will be shining a light on item template, header template, and creating the grid view according to our requirement. Let's start step by step.

Database structure

Create a table in the database with the name EmployeDetail. My table structure is the depicted figure, given below:

structure

Afterwards add connection in your Web .config file.

Let's see the HTML page which contains the single grid view and a button.

Here, I created a button and on the click of a button, the grid view will show:

HTML

  1. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <title></title>
  6. </head>
  7. <body>
  8. <form id="form1" runat="server">
  9. <div>
  10. <asp:GridView ID="DataGridview" runat="server" Width="99%" GridLines="Both" AutoGenerateColumns="false">
  11. <Columns>
  12. <asp:TemplateField>
  13. <HeaderTemplate>
  14. <th colspan="5"> Employee</th>
  15. <tr class ="header1">
  16. <th style="width:0px"></th>
  17. <th colspan="3" >Employee description </th>
  18. <th colspan="2">Employer Salary</th>
  19. </tr>
  20. <tr class="header2">
  21. <th></th>
  22. <th>Serial No.</th>
  23. <th>Employee Name</th>
  24. <th> Employee Adress</th>
  25. <th >Employee designation </th>
  26. <th>Salary</th>
  27. </tr>
  28. </HeaderTemplate>
  29. <ItemTemplate>
  30. <td style="width:40px"><%# Eval("EmpId") %></td>
  31. <td><%# Eval("EmployeName")%></td>
  32. <td><%# Eval("Address")%></td>
  33. <td><%# Eval("Salary")%></td>
  34. <td><%# Eval("Designation")%></td>
  36. </ItemTemplate>
  38. </asp:TemplateField>
  39. </Columns>
  41. </asp:GridView>
  42. </div>
  43. <div>
  44. <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
  45. </div>
  46. </form>
  47. </body>
  48. </html>
In the HTML code shown above, I used some logic or trick -- I added a th tag and tr tag to create a multirow header, which is our requirement.

Afterwards, I added some code in cs file for binding the grid view with the table. Let us see the cs code.

CS Code
  1. public partial class GridView : System.Web.UI.Page
  2. {
  3. string connectstring = ConfigurationManager.ConnectionStrings["connect"].ToString();
  5. protected void Page_Load(object sender, EventArgs e)
  6. {
  8. }
  10. protected void Button1_Click(object sender, EventArgs e)
  11. {
  13. BindGridviewData();
  14. }
  16. public void BindGridviewData()
  17. {
  18. SqlConnection con = new SqlConnection(connectstring);
  19. SqlCommand cmd = new SqlCommand("select * from EmployeDetail", con);
  20. SqlDataAdapter da = new SqlDataAdapter(cmd);
  21. DataTable datatable = new DataTable();
  22. da.Fill(datatable);
  23. DataSet ds = new DataSet();
  25. DataTable table = new DataTable();
  26. table.Columns.Add("Empid", typeof(int));
  27. table.Columns.Add("EmployeName", typeof(string));
  28. table.Columns.Add("Address", typeof(string));
  29. table.Columns.Add("Salary", typeof(long));
  30. table.Columns.Add("Designation", typeof(string));
  31. foreach (DataRow row in datatable.Rows)
  32. {
  33. DataRow DR = table.NewRow();
  34. DR["Empid"] = row["Empid"].ToString();
  35. DR["EmployeName"] = row["EmployeName"].ToString();
  36. DR["Address"] = row["Address"].ToString();
  37. DR["Salary"] = row["Salary"].ToString();
  38. DR["Designation"] = row["Designation"].ToString();
  39. table.Rows.Add(DR);
  40. }
  41. DataGridview.DataSource = table;
  42. DataGridview.DataBind();
  45. }
  46. }
In the code given above, I fetched the data from the database table and inserted it into the table. Here, I am creating a custom table according to our grid view. I need to insert the data in the custom table and bind our custom table with the grid view.

Press F5 and see the output:

output

My grid view is not in the proper format. Hence, add a single single property in the grid view:
  1. <asp:GridView ID="DataGridview" runat="server" Width="99%" GridLines="Both" AutoGenerateColumns="false">
In the above code AutoGenerateColumns =”false” property is added because it hides the Database columns on GridView and only shows Custom Columns which are created on Header Template. Again Press F5.

output

Now, my grid view comes in the right format.

Summary

In this article, we learned how to create a multirow in the grid view and bind the grid view with the table.