This article will discuss about multiple header in GridView like below image.
Step 1: Create a gridview with two columns, id and name and a datakey category.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" DataKeyNames="Category" OnRowDataBound="GridView1_OnRowDataBound"> <Columns> <asp:BoundField DataField="id" HeaderText="ID" /> <asp:BoundField DataField="Name" HeaderText="Name" /> </Columns> <HeaderStyle BackColor="Brown" ForeColor="White" /> </asp:GridView>
Step 2: Create a datatable which will contain name of fruits, flowers and plants.
private DataTable GetData() { DataTable dt = new DataTable(); DataColumn dc; dc = new DataColumn("id"); dt.Columns.Add(dc); dc = new DataColumn("Category"); dt.Columns.Add(dc); dc = new DataColumn("Name"); dt.Columns.Add(dc); DataRow dr; dr = dt.NewRow(); dr["id"] = "1"; dr["Category"] = "Fruits"; dr["Name"] = "Apple"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["id"] = "2"; dr["Category"] = "Fruits"; dr["Name"] = "Mango"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["id"] = "1"; dr["Category"] = "Flowers"; dr["Name"] = "Rose"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["id"] = "2"; dr["Category"] = "Flowers"; dr["Name"] = "Lily"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["id"] = "1"; dr["Category"] = "Plants"; dr["Name"] = "Alpine Poppy"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["id"] = "2"; dr["Category"] = "Plants"; dr["Name"] = "Applecactus "; dt.Rows.Add(dr); return dt; }
Step 3: Bind the above created datatable to GridView on Page_Load
protected void Page_Load(object sender, EventArgs e) { GridView1.DataSource = GetData(); GridView1.DataBind(); }
Step 4: On GridView1_OnRowDataBound, custom CreateHeader method will be called when category will change while binding the data.
protected void GridView1_OnRowDataBound(object sender, GridViewRowEventArgs e) { DataKey dk, dk1; string strCategory = string.Empty; if (e.Row.RowType == DataControlRowType.DataRow) { dk = GridView1.DataKeys[e.Row.DataItemIndex]; if (e.Row.DataItemIndex == 0) { dk1 = GridView1.DataKeys[e.Row.DataItemIndex]; } else { dk1 = GridView1.DataKeys[e.Row.DataItemIndex - 1]; strCategory = dk1.Values["Category"].ToString(); } string sCategory = dk.Values["Category"].ToString(); switch (sCategory) { case "Fruits": if (!dk.Values["Category"].ToString().Equals(strCategory)) { CreateHeader("Fruits", e.Row.Cells.Count, e.Row.DataItemIndex + 1); } break; case "Flowers": if (!(dk.Values["Category"].ToString() == dk1.Values["Category"].ToString())) { CreateHeader("Flowers", e.Row.Cells.Count, e.Row.DataItemIndex + 2); } break;
case "Plants": if (!(dk.Values["Category"].ToString() == dk1.Values["Category"].ToString())) { CreateHeader("Plants", e.Row.Cells.Count, e.Row.DataItemIndex + 3); } break; } } }
Step 5: CreateHeader method will create GridViewRow, TableHeaderCell will create header which will be added in the GridViewRow.
public void CreateHeader(string strCategory, int rowCount, int rowDataIndex) { GridViewRow rowHeader = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal); Literal newCells = new Literal(); newCells.Text = strCategory; TableHeaderCell headerCell = new TableHeaderCell(); headerCell.BackColor = System.Drawing.Color.Black; headerCell.Controls.Add(newCells); headerCell.ColumnSpan = rowCount; rowHeader.Cells.Add(headerCell); rowHeader.Visible = true; GridView1.Controls[0].Controls.AddAt(rowDataIndex, rowHeader); }
LiveDemo
|