Gridview multiple header rows

How to show multirow header in gridview in asp.net? i was searching for this question but could not found any easy way so I decided to try my own and found it is not so difficult. Simply we can use header template and item template and design it according to our requirements. we will see this in action in this article.

First let's see what we are going to do, here is the final output which we will achieve in this article. 

Now we know what we are going to do so let's see the HTML of this grid

<asp:GridView ID="gvProducts" runat="server"
  Width="99%"
  GridLines="None"
  HeaderStyle-CssClass="gvHeader"
  CssClass="gvRow"
  AlternatingRowStyle-CssClass="gvAltRow"
  AutoGenerateColumns="false">
  <Columns>
    <asp:TemplateField>
      <HeaderTemplate>
        <th colspan="6">Category</th>
        <tr class="gvHeader">
           <th style="width:0px"></th>
           <th colspan="3">Hardware</th>                        
           <th colspan="3">Software</th>
        </tr>
        <tr class="gvHeader">
          <th></th>
          <th>S. No.</th>
          <th>Product</th>
          <th>Price</th>

          <th>Product</th>
          <th>Descript</th>
          <th>Price</th>
        </tr>
      </HeaderTemplate> 
      <ItemTemplate>
        <td style="width:40px"><%# Eval("SNO") %></td>
        <td><%# Eval("Product")%></td>
        <td><%# Eval("Price")%></td>
        <td><%# Eval("HProduct")%></td>
        <td><%# Eval("Description")%></td>
        <td><%# Eval("HPrice")%></td>
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

We need used some trick here so let's understand those

1. Only One TemplateField
2. In HeaderTemplate for category we expand the header to 6 columns and no tr because header template will automatically create the first tr
3. Then create a new row by using tr
4. Here first th without any text and two more column both with colspan = 3 so total 7 columns while we need only 6, why, don't worry for now add one extra column in each row in header as well as item except first header row
5. Now in ItemTemplate use td for every column and bind the value according to your requirement

Everything is don for designing the multiple rows in header, so let's create a hard coded data table and bind the gridview

DataTable dTab = new DataTable();

dTab.Columns.Add("SNO");
dTab.Columns.Add("Product");
dTab.Columns.Add("Price");
dTab.Columns.Add("HProduct");
dTab.Columns.Add("Description");
dTab.Columns.Add("HPrice");
DataRow dr = dTab.NewRow();
for (int i = 0; i < 10; i++)
{
    dr = dTab.NewRow();
    dr["SNO"] = i + 1;
    dr["Product"] = String.Format("MS-Office {0}", i + 1);
    dr["Price"] = 10 * (i + 1);
    dr["HProduct"] = String.Format("Mouse {0}", i + 1);
    dr["Description"] = String.Format("USB mouse {0}", i + 1);
    dr["HPrice"] = 7 * (i + 1);
    dTab.Rows.Add(dr);
}            

gvProducts.DataSource = dTab;
gvProducts.DataBind();

Copy and paste HTML in your aspx page and code in page load method and run it. you will see a simple grid with and extra line at beginning, add following style to your page.

.gvHeader th{
   padding:3px; 
    background-color:#DDEECC; 
   color:maroon; 
   border:1px solid #bbb;}
 .gvRow td{padding:3px; 
    background-color:#ffffff; 
    border:1px solid #bbb;}
.gvAltRow td{
    padding:3px; 
    background-color:#f1f1f1; 
    border:1px solid #bbb;}

Run your page and you will see your grid similar to above image in this article but still one extra column is there so to remove the extra column add following three lines and your extra column will be hidden and you will get the perfect output

.gvHeader th:first-child{display:none;}
.gvRow td:first-child{display:none;}
.gvAltRow td:first-child{display:none;}

Now we completed out multiple row header and formatting.