How To Create Multirow Header In GridView Using ASP.NET

Atul Rawat

15 Comments

Join the conversation! Your thoughts help the community grow.

Nick Demari10y ago
How do you load the DataTable with an empty dataset? The declared dataset is never used.
Santhakumar Munuswamy10y ago
Nice share
Atul Rawat10y ago
Thanks all my frnds
Humayun Kabir Mamun10y ago
Nice...
Thiruppathi R10y ago
Nice Share..
Rakesh10y ago
Good share
- Atul Rawat10y ago
  thanks for reading
Vignesh Mani10y ago
Good one
- Atul Rawat10y ago
  thanks for reading
Debasis Saha10y ago
Good share..
- Atul Rawat10y ago
  thanks for reading
Atul Rawat10y ago
thanks for reading..
Gowtham K10y ago
Good One
Raja10y ago
Nice Share..
- Atul Rawat10y ago
  Raja Ganapathy ji thanks

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:

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="DataGridview" runat="server" Width="99%" GridLines="Both" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<th colspan="5"> Employee</th>
<tr class ="header1">
<th style="width:0px"></th>
<th colspan="3" >Employee description </th>
<th colspan="2">Employer Salary</th>
</tr>
<tr class="header2">
<th></th>
<th>Serial No.</th>
<th>Employee Name</th>
<th> Employee Adress</th>
<th >Employee designation </th>
<th>Salary</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<td style="width:40px"><%# Eval("EmpId") %></td>
<td><%# Eval("EmployeName")%></td>
<td><%# Eval("Address")%></td>
<td><%# Eval("Salary")%></td>
<td><%# Eval("Designation")%></td>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</form>
</body>
</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

public partial class GridView : System.Web.UI.Page
{
string connectstring = ConfigurationManager.ConnectionStrings["connect"].ToString();
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
BindGridviewData();
}
public void BindGridviewData()
{
SqlConnection con = new SqlConnection(connectstring);
SqlCommand cmd = new SqlCommand("select * from EmployeDetail", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable datatable = new DataTable();
da.Fill(datatable);
DataSet ds = new DataSet();
DataTable table = new DataTable();
table.Columns.Add("Empid", typeof(int));
table.Columns.Add("EmployeName", typeof(string));
table.Columns.Add("Address", typeof(string));
table.Columns.Add("Salary", typeof(long));
table.Columns.Add("Designation", typeof(string));
foreach (DataRow row in datatable.Rows)
{
DataRow DR = table.NewRow();
DR["Empid"] = row["Empid"].ToString();
DR["EmployeName"] = row["EmployeName"].ToString();
DR["Address"] = row["Address"].ToString();
DR["Salary"] = row["Salary"].ToString();
DR["Designation"] = row["Designation"].ToString();
table.Rows.Add(DR);
}
DataGridview.DataSource = table;
DataGridview.DataBind();
}
}

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:

<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.