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