grouping headers in gridview - asp.net

Question

With reference to this link: https://web.archive.org/web/20210301194237/https://www.4guysfromrolla.com/articles/091708-1.aspx
I want to implement grouping headers for the gridview similar to what is shown in the below listview.
HTML Source:
<asp:ListView ID="ProductsGroupedByDataField" runat="server" DataSourceID="odsAllPlannedLeaves"
<LayoutTemplate>
<table cellspacing="0" cellpadding="5" rules="all" border="1" >
<tr style="background-color:#5D7B9D;color:White">
<th>Start Date</th>
<th>End Date</th>
<th>Date Of Applying</th>
</tr>
<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<ItemTemplate>
<%# AddGroupingRowIfSupplierHasChanged() %>
<tr class='data<%# Container.DataItemIndex % 2 %>'>
<td><%#GetDate(Eval("Emp_StartDate"))%></td>
<td><%#GetDate(Eval("Emp_EndDate"))%></td>
<td><%#GetEntryDate(Eval("Emp_EntryDate"))%></td>
</tr>
</ItemTemplate>
</asp:ListView>
Method:
int LastEmpId = 0;
protected string AddGroupingRowIfSupplierHasChanged()
{
int CurrentEmpId = Convert.ToInt32(Eval("Emp_Id").ToString());
if (LastEmpId != CurrentEmpId)
{
LastEmpId = CurrentEmpId;
string CurrentEmpName = Eval("Emp_Name").ToString();
string CurrentEmailId = Eval("Emp_EmailID").ToString();
return string.Format("<tr style='text-align:left' class='group'><td colspan='3'>Employee Name: " + CurrentEmpName + " | Email Id: " + CurrentEmailId + "</td></tr>");
}
else
return string.Empty;
}
How can I implement this in a gridview ?

Answer 1

I use this little "break" for the Gridview's subheaders:
private string tmpCategoryName = "";
protected void gdvRowDatabound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow) {
HiddenField hdnTmpSubTitle = (HiddenField)e.Row.FindControl("hdnTmpSubTitle");
if (!(tmpCategoryName == hdnTmpSubTitle.Value)) {
tmpCategoryName = hdnTmpSubTitle.Value;
Table tbl = e.Row.Parent as Table;
if (tbl != null) {
GridViewRow row = new GridViewRow(-1, -1, DataControlRowType.DataRow, DataControlRowState.Normal);
TableCell cell = new TableCell();
cell.ColumnSpan = this.grdViewProjects.Columns.Count;
cell.Width = Unit.Percentage(100);
cell.Style.Add("font-weight", "bold");
cell.Style.Add("background-color", "#c0c0c0");
cell.Style.Add("color", "white");
HtmlGenericControl span = new HtmlGenericControl("span");
span.InnerHtml = tmpCategoryName;
cell.Controls.Add(span);
row.Cells.Add(cell);
tbl.Rows.AddAt(tbl.Rows.Count - 1, row);
}
}
}
}
This code gets the top level "Category" which is within your Gridview and just creates an extra table row, with one single cell, adds the style and then adds the category name. If the category is different from row to row, then change it. Ensure that your datasource is ordered by your "Category" first (or whatever you're using as a subheading).
Also ensure you place a HiddenField with the "Category" into a Template Field in your Gridview.