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
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.
![]() |
Having 13+ years of experience in Microsoft Technologies (C#, ASP.Net, MVC and SQL Server). Worked with Metaoption LLC, for more than 9 years and still with the same company. Always ready to learn new technologies and tricks.
|
By Ali Adravi On 30 May, 13 Viewed: 43,938 |
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
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
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
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
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