Apply alternative row style to merged ASP.Net GridView rows using C# and VB.Net with JavaScript

Hi Hazel,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<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>
<style type="text/css">
    .odd {
        background-color: #CDFFFF;
    }

    .even {
        background-color: #FFFFC6;
    }
</style>
<script type="text/javascript">
    var table = document.getElementById('<%=GridView1.ClientID%>');
    var rows = table.getElementsByTagName("tr");
    var className = '';
    var str = '';
    for (i = 1; i < rows.length; i++) {
        if (rows[i].getElementsByTagName("td").length == 3) {
            if (str == '') {
                str = i;
            } else {
                str = str + ',' + i;
            }
        }
    }

    var arr = str.split(",");
    for (j = 0; j < arr.length; j++) {
        if (j % 2 == 0) {
            rows[arr[j]].className = "even";
        } else {
            rows[arr[j]].className = "odd";
        }
    }

    for (i = 1; i < rows.length; i++) {
        if (rows[i].getElementsByTagName("td").length == 3) {
            className = rows[i].className;
        } else {
            rows[i].className = className;
        }
    }
</script>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        string query = "SELECT TOP 20 ContactName, Country, City FROM Customers WHERE City IS NOT NULL GROUP BY Country, City, ContactName";
        GridView1.DataSource = GetData(query);
        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;
    }
}
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 Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As New DataTable()
        Dim query As String = "SELECT TOP 20 ContactName, Country, City FROM Customers WHERE City IS NOT NULL GROUP BY Country, City, ContactName"
        GridView1.DataSource = GetData(query)
        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
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

Screenshot