How to merge GridView Cells to display same value in ASP.NET?

Answer 1

Many times there are same values for a column in multiple rows. You may want to display repeated items one time and merge cells. In this article, I will merge GridView column cells and display same items in one cell. I will use “titles” table of PUBS sample database to get data and display it on a GridView and then I will write a function to merge cells that shows same items.

1.Create a new Empty Web Site in Visual Studio 2010 either in Visual Basic or Visual C#.
2.Add a Web Form in the Web Site. No Need to change name of the Page
3.Write below code in Web Form

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="title_id" HeaderText="Title Id" />
        <asp:BoundField DataField="title" HeaderText="Title" />
        <asp:BoundField DataField="type" HeaderText="Type" />
        <asp:BoundField DataField="pub_id" HeaderText="Pub Id" />
     </Columns>
</asp:GridView>

4.Namespaces used in the code

Visual Basic

Imports System.Data
Imports System.Data.SqlClient

Visual C#

using System.Data;
using System.Data.SqlClient;

5.Write this function in code file

In below function, I have created two GridViewRow objects for current and previous rows. Then I have checked the text of both cells and if they are equal then I have used another if statement to check Row Span of previous row cell is less than 2. If it is less than two then I am setting the Row Span of current row cell equals to 2 and if it is not less than 2 then I have set Row Span of current row cell to Row Span of previous row cell plus 1. In both cases, I have set visible to false for previous row cell.

Visual Basic

Private Sub MergeCells()
    Dim i As Integer = GridView1.Rows.Count - 2
    While i >= 0
        Dim curRow As GridViewRow = GridView1.Rows(i)
        Dim preRow As GridViewRow = GridView1.Rows(i + 1)

        Dim j As Integer = 0
        While j < curRow.Cells.Count
            If curRow.Cells(j).Text = preRow.Cells(j).Text Then
                If preRow.Cells(j).RowSpan < 2 Then
                    curRow.Cells(j).RowSpan = 2
                    preRow.Cells(j).Visible = False
                Else
                    curRow.Cells(j).RowSpan = preRow.Cells(j).RowSpan + 1
                    preRow.Cells(j).Visible = False
                End If
            End If
            j += 1
        End While
        i -= 1
    End While
End Sub

Visual C#

private void MergeCells()
{
    int i = GridView1.Rows.Count - 2;
    while (i >= 0)
    {
        GridViewRow curRow = GridView1.Rows[i];
        GridViewRow preRow = GridView1.Rows[i + 1];

        int j = 0;
        while (j < curRow.Cells.Count)
        {
            if (curRow.Cells[j].Text == preRow.Cells[j].Text)
            {
                if (preRow.Cells[j].RowSpan < 2)
                {
                    curRow.Cells[j].RowSpan = 2;
                    preRow.Cells[j].Visible = false;
                }
                else
                {
                    curRow.Cells[j].RowSpan = preRow.Cells[j].RowSpan + 1;
                    preRow.Cells[j].Visible = false;
                }
            }
            j++;
        }
        i--;
    }
}

6.Now write below code in Page Load method

In below code, I have established connection to PUBS database in SQL Server and retrieved data from “titles” table in a DataSet object. This DataSet object is provided GridView as data source. At the end, I have called the MergeCells() function.

Visual Basic

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    Dim text As String = "SELECT title_id, title, type, pub_id FROM titles"
    Dim connString As String = "Data Source=YourServer;Initial Catalog=PUBS;Integrated Security=True"
    Dim conn As New SqlConnection(connString)
    Dim cmd As New SqlCommand(text, conn)
    conn.Open()
    Dim da As New SqlDataAdapter(cmd)
    Dim ds As New DataSet()
    da.Fill(ds)
    conn.Close()

    GridView1.DataSource = ds
    GridView1.DataBind()

    MergeCells()
End Sub

Visual C#

protected void Page_Load(object sender, EventArgs e)
{
    string text = "SELECT title_id, title, type, pub_id FROM titles";
    string connString = "Data Source=YourServer;Initial Catalog=PUBS;Integrated Security=True";
    SqlConnection conn = new SqlConnection(connString);
    SqlCommand cmd = new SqlCommand(text, conn);
    conn.Open();
    SqlDataAdapter da = new SqlDataAdapter(cmd);
    DataSet ds = new DataSet();
    da.Fill(ds);
    conn.Close();

    GridView1.DataSource = ds;
    GridView1.DataBind();

    MergeCells();
}

7.Now you can see website in your browser