In this article I will explain with an example, how to add RowSpan to GridView in ASP.Net using C# and VB.Net.
This article will illustrate how to dynamically merge common Cells of GridView using RowSpan property in ASP.Net using C# and VB.Net.
You can also read some other interesting articles on GridView:-
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
HTML Markup
The HTML Markup consists of an ASP.Net GridView with three BoundField columns. The GridView has been assigned OnDataBound event handler which will be later used for merging the GridView Rows.
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat = "server" AutoGenerateColumns="false" OnDataBound="OnDataBound">
<Columns>
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
<asp:BoundField DataField="City" HeaderText="City" ItemStyle-Width="150" />
<asp:BoundField DataField="ContactName" HeaderText="Name" ItemStyle-Width="150" />
</Columns>
</asp:GridView>
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Binding the GridView
Inside the Page Load event handler, the GridView is populated with the records from the Customers Table of the Northwind Database.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
GridView1.DataSource = GetData("SELECT ContactName, Country, City FROM Customers GROUP BY Country, City, ContactName");
GridView1.DataBind();
}
}
private DataTable GetData(string query)
{
DataTable dt = new DataTable();
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
sda.SelectCommand = cmd;
sda.Fill(dt);
}
}
return dt;
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As New DataTable()
GridView1.DataSource = GetData("SELECT ContactName, Country, City FROM Customers GROUP BY Country, City, ContactName")
GridView1.DataBind()
End If
End Sub
Private Function GetData(query As String) As DataTable
Dim dt As New DataTable()
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand(query)
Using sda As New SqlDataAdapter()
cmd.CommandType = CommandType.Text
cmd.Connection = con
sda.SelectCommand = cmd
sda.Fill(dt)
End Using
End Using
Return dt
End Using
End Function
Add RowSpan to GridView in ASP.Net
Inside the OnDataBound event handler, a reverse loop is executed over the GridView Rows and then the common Cells are identified and merged into single Cell.
C#
protected void OnDataBound(object sender, EventArgs e)
{
for (int i = GridView1.Rows.Count - 1; i > 0; i--)
{
GridViewRow row = GridView1.Rows[i];
GridViewRow previousRow = GridView1.Rows[i - 1];
for (int j = 0; j < row.Cells.Count; j++)
{
if (row.Cells[j].Text == previousRow.Cells[j].Text)
{
if (previousRow.Cells[j].RowSpan == 0)
{
if (row.Cells[j].RowSpan == 0)
{
previousRow.Cells[j].RowSpan += 2;
}
else
{
previousRow.Cells[j].RowSpan = row.Cells[j].RowSpan + 1;
}
row.Cells[j].Visible = false;
}
}
}
}
}
VB.Net
Protected Sub OnDataBound(sender As Object, e As EventArgs)
For i As Integer = GridView1.Rows.Count - 1 To 1 Step -1
Dim row As GridViewRow = GridView1.Rows(i)
Dim previousRow As GridViewRow = GridView1.Rows(i - 1)
For j As Integer = 0 To row.Cells.Count - 1
If row.Cells(j).Text = previousRow.Cells(j).Text Then
If previousRow.Cells(j).RowSpan = 0 Then
If row.Cells(j).RowSpan = 0 Then
previousRow.Cells(j).RowSpan += 2
Else
previousRow.Cells(j).RowSpan = row.Cells(j).RowSpan + 1
End If
row.Cells(j).Visible = False
End If
End If
Next
Next
End Sub
Screenshots
GridView without merged Rows
![Add RowSpan to GridView in ASP.Net]()
GridView with merged Rows
![Add RowSpan to GridView in ASP.Net]()
Demo
Downloads
