Gridview Merge or Group rows in ASP.NET
Gridview in Asp.Net displays the data in tabular format using rows and columns. Sometimes you may have requirement to group or merge same rows based on data.
For example you are displaying the country data by using Gridview. Grid has CountryId, CountryName and State data. We have requirement to display the country states as group. To merge the Gridview rows we have to use Gridview PreRender event to compare and merge the related rows as shown below.
using System;
using System.Data;
using System.Web.UI.WebControls;
namespace GridviewMergeRows
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
CreateTable();
}
private void CreateTable()
{
try
{
DataTable dt = new DataTable();
dt.Columns.Add("CountryId");
dt.Columns.Add("CountryName");
dt.Columns.Add("State");
dt.Rows.Add("1", "US", "Alabama");
dt.Rows.Add("1", "US", "Hawaii");
dt.Rows.Add("1", "US", "Georgia");
dt.Rows.Add("1", "US", "Alaska");
dt.Rows.Add("2", "UK", "United Kingdom");
dt.Rows.Add("3", "India", "Delhi");
dt.Rows.Add("3", "India", "Andhra Pradesh");
dt.Rows.Add("3", "India", "Maharashtra");
gv1.DataSource = dt;
gv1.DataBind();
}
catch (Exception ex)
{ }
}
private void MergeGridviewRows(GridView gridView)
{
for (int rowIndex = gridView.Rows.Count - 2; rowIndex >= 0; rowIndex--)
{
GridViewRow row = gridView.Rows[rowIndex];
GridViewRow previousRow = gridView.Rows[rowIndex + 1];
if (row.Cells[0].Text == previousRow.Cells[0].Text && row.Cells[1].Text == previousRow.Cells[1].Text)
{
row.Cells[0].RowSpan = previousRow.Cells[0].RowSpan < 2 ? 2 : previousRow.Cells[0].RowSpan + 1;
row.Cells[1].RowSpan = previousRow.Cells[1].RowSpan < 2 ? 2 : previousRow.Cells[1].RowSpan + 1;
previousRow.Cells[0].Visible = false;
previousRow.Cells[1].Visible = false;
}
}
}
protected void gv1_PreRender(object sender, EventArgs e)
{
MergeGridviewRows(gv1);
}
}
}
As shown above, we are merging the Gridview rows in MergeGridviewRows method by comparing CountryId and CountryName fields. We are calling this MergeGridviewRows method in Gridview PreRender event.
After merging the related Gridview rows, the output displays as shown below.
