Post
Ask Question

Displaying Multiple Columns Under a Single Column in GridView in ASP.NET

Sometimes we might need to display multiple columns under a single column within a GridView, like we normally do in an Excel file; something like the following snippet:

multiple-columns-under-a single-column-in-GridView.jpg

For doing such things we can use GridView's RowDataBound event for formatting the header row of the GridView. I think looking at the snippet you all might see what basically we are going to do. So without wasting any time I'll be providing you with the source code and the code snippet.

The following is the design source code for that.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title></title>  
  7. </head>  
  8. <body>  
  9.     <form id="form1" runat="server">  
  10.     <asp:GridView ID="GridView1" runat="server"  
  11.         onrowdatabound="GridView1_RowDataBound">  
  12.     </asp:GridView>  
  13.     <div>  
  14.     </div>  
  15.     </form>  
  16. </body>  
  17. </html> 

The following is the code file snippet for it. Here we are using static values within a datatable and finally binding that datatable to the GridView.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data;  
  8. using System.Data.SqlClient;   
  9.   
  10. public partial class _Default : System.Web.UI.Page  
  11. {  
  12.     static DataTable dt = null;  
  13.     protected void Page_Load(object sender, EventArgs e)  
  14.     {  
  15.         if (!IsPostBack)  
  16.              CreateDataTable();  
  17.     }   
  18.   
  19.     private void CreateDataTable()  
  20.     {  
  21.   
  22.         if (dt == null)  
  23.         {  
  24.             string[] cols = { "Age Group", "Admin", "Systems", "HR", "IT" };  
  25.             string[,] data = { { "18-25", "25", "20", "35", "40" }, { "25-35", "25", "75", "65", "45" }, { "35-45", "25", "35", "20", "16" } };  
  26.              dt = new DataTable();  
  27.             foreach (string str in cols)  
  28.                  dt.Columns.Add(str);  
  29.             for (int i = 0; i < 3; i++)  
  30.             {  
  31.                 DataRow dr = dt.NewRow();  
  32.                 for (int j = 0; j < 5; j++)  
  33.                  {  
  34.                     dr[j] = data[i, j];  
  35.                  }  
  36.                  dt.Rows.Add(dr);  
  37.             }  
  38.         }  
  39.          GridView1.DataSource = dt;  
  40.          GridView1.DataBind();  
  41.     }  
  42.   
  43.     protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)  
  44.     {  
  45.         GridViewRow gvRow = e.Row;  
  46.         if (gvRow.RowType == DataControlRowType.Header)  
  47.         {  
  48.             if (gvRow.Cells[0].Text == "Age Group")  
  49.             {  
  50.                  gvRow.Cells.Remove(gvRow.Cells[0]);  
  51.                 GridViewRow gvHeader = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);  
  52.                 TableCell headerCell0 = new TableCell()  
  53.                  {  
  54.                     Text="Age Group",  
  55.                     HorizontalAlign=HorizontalAlign.Center,  
  56.                     RowSpan=2  
  57.                  };  
  58.                 TableCell headerCell1 = new TableCell()  
  59.                  {  
  60.                     Text="No. Of Employees",  
  61.                     HorizontalAlign=HorizontalAlign.Center,  
  62.                     ColumnSpan=4  
  63.                  };  
  64.                  gvHeader.Cells.Add(headerCell0);  
  65.                  gvHeader.Cells.Add(headerCell1);  
  66.                  GridView1.Controls[0].Controls.AddAt(0, gvHeader);  
  67.             }  
  68.         }  
  69.     }  
  70. } 

The following is the output for it.

multiple-columns-under-a single-column-in-GridView1.jpg

Hope you all have enjoyed the code and it may help you in your project.


Similar Articles