Post
Ask Question

Merge Cells Columns in Row of GridView in VB.NET

In this article we will be able to merge GridView cells ,columns in GridView rows.

Here in DataBound Event of the GridView control we count total number of rows and then checking each cells value against value of same cell in previous row and then setting the RowSpan of cells.

Table structure

Table-in-SQL-Server.gif
 

Default.aspx code

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default"%>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
    <title>Untitled Page</title>
 </head>
<body>
     <form id="form1" runat="server">
    <div>
    <asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" 
    BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black"
    Height="119px"
    OnDataBound="GridView1_DataBound1" BackColor="White">
            <Columns>

            <asp:BoundField DataField="Country"
                            HeaderText="Country"
                            SortExpression="Country" />

            <asp:BoundField DataField="State"
                            HeaderText="State"

                            SortExpression="State" />

            <asp:BoundField DataField="City"
                            HeaderText="City"
                            SortExpression="City" />
        </Columns>
            <HeaderStyle BackColor="#FF8040" />
            <EditRowStyle BackColor="#FFCC00" />
            <AlternatingRowStyle BackColor="White" ForeColor="Black" />
 </asp:GridView>
     </div>
    </form>
 </body>
</html>

Default.aspx.vb code

Imports System.Data
 Imports System.Data.SqlClient
 Partial Class _Default
    Inherits System.Web.UI.Page
    Dim strConnString As String = System.Configuration.ConfigurationManager.ConnectionStrings.Item("ConnectionString").ToString()
    Dim con As New SqlConnection(strConnString)
    Dim str As String
    Dim com As SqlCommand
    Dim sqlda As SqlDataAdapter

    Dim ds As DataSet
 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        con.Open()
        str = "select country,state,city from location order by state"
        com = New SqlCommand(str, con)
        Dim reader As SqlDataReader
        reader = com.ExecuteReader()
        GridView1.DataSource = reader
        GridView1.DataBind()

        con.Close()
    End Sub
 End Class
    Protected Sub GridView1_DataBound1(ByVal sender As Object, ByVal e As System.EventArgs)Handles GridView1.DataBound
        For rowIndex As Integer = GridView1.Rows.Count - 2 To 0 Step -1
            Dim gviewRow As GridViewRow = GridView1.Rows(rowIndex)
            Dim gviewPreviousRow As GridViewRow = GridView1.Rows(rowIndex + 1)
            For cellCount As Integer = 0 To gviewRow.Cells.Count - 1
                If gviewRow.Cells(cellCount).Text = gviewPreviousRow.Cells(cellCount).Text Then
                    If gviewPreviousRow.Cells(cellCount).RowSpan < 2 Then
                        gviewRow.Cells(cellCount).RowSpan = 2
                    Else
                        gviewRow.Cells(cellCount).RowSpan = gviewPreviousRow.Cells(cellCount).RowSpan + 1
                    End If
                    gviewPreviousRow.Cells(cellCount).Visible = False
                End If
            Next
        Next
    End Sub  

Output

merge-column-in-GridView.gif 


Similar Articles