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.

Other blogs you may like

Nested Gridview binding in asp.net with collapsible feature

ASP.Net GridView binding is really easy but nested binding is a little bit tricky. We need to create two row for every single row one for normal row data and other for nested grid. There are two way to create multiple rows, one is by using the JavaScript by manipulating the html and other is... By Ali Adravi   On 03 Dec 2014  Viewed: 11,436

Insert, update and delete in asp.net gridview step by step

We will do insert, update and delete functionality in a GridView with modal popup, we will proceed step by step to learn how easily we can complete this functionality in any project. We will try to create a basic user page where you can see all the users in a grid with paging and buttons to add... By Hamden   On 01 Sep 2013  Viewed: 24,684

Bind multiple value for hyperlink in gridview

When need to use a JavaScript function with multiple parameters and those parameter values need to be bind at the time of binding the gridview data then it really becomes complicated, say we have a function GetLatLong which calculates Latitude and Longitude by using city, state, Country and zip... By Ali Adravi   On 20 May 2013  Viewed: 2,700

Gridview paginated data with search and sort functionality in asp.net

Most of the times we need to use GridView control to show tabular data in our asp.net application. We simply write procedure to search the records and bind them with GridView and show 10 to 20 records per page. Have you ever thought that why you are fetching all the records and show only 10 to 20... By Ali Adravi   On 16 Feb 2013  Viewed: 8,518

Upload multiple image in multiple size with progress bar in asp.net

In asp.net there is not control to select multiple files and upload them once with progress bar, so we will use a small third party DLL to achieve this functionality. We will use Flajaxian FileUploader, you can download it from [http://www.flajaxian.com][1] We will create three different images... By Hamden   On 12 Jul 2012  Viewed: 6,558