Merge GridView Cells Or Columns In Row ASP.NET C# VB.NET

In this example i am going to describe how to Merge GridView Cells Or Columns In Gridview Rows Using C# and VB.NET in ASP.NET Containing Same Data or content. For this i m using DataBound Event of gridview, counting total rows and then checking each cells value against value of same cell in previous row and then setting the RowSpan of cells.

Merge GridView Cells Or Columns

For this i have created a table containing Counties ,states and respective cities and country and state cells / columns are merged in rows having same country or states.


For knowing how to merge Gridview headers read article below
Merging GridView Header Columns or multiple Headers


You would also like to read
Hide GridView Columns In Normal Mode and Visible In Edit


Running Total In Gridview Footer in ASP.NET C# VB.NET











Html source of the page look like this
<asp:GridView ID="GridView1" runat="server" 
    AutoGenerateColumns="False"  
    BorderStyle="None" BorderWidth="1px" CellPadding="4" 
    GridLines="Horizontal" ForeColor="Black" 
    Height="119px" DataSourceID="SqlDataSource1" 
    OnDataBound="GridView1_DataBound1"> 
            <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>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT [Country], [State], [City] 
               FROM [Details] ORDER BY [State]">
</asp:SqlDataSource>

C# code behind
protected void GridView1_DataBound1(object sender, EventArgs e)
{
  for (int rowIndex = GridView1.Rows.Count - 2; 
                                     rowIndex >= 0; rowIndex--)
  {
    GridViewRow gvRow = GridView1.Rows[rowIndex];
    GridViewRow gvPreviousRow = GridView1.Rows[rowIndex + 1];
    for (int cellCount = 0; cellCount < gvRow.Cells.Count; 
                                                  cellCount++)
    {
     if (gvRow.Cells[cellCount].Text == 
                            gvPreviousRow.Cells[cellCount].Text)
     {
       if (gvPreviousRow.Cells[cellCount].RowSpan < 2)
       {
         gvRow.Cells[cellCount].RowSpan = 2;
       }
       else
       {
        gvRow.Cells[cellCount].RowSpan = 
            gvPreviousRow.Cells[cellCount].RowSpan + 1;
       }
       gvPreviousRow.Cells[cellCount].Visible = false;
    }
   }
 }
}
VB.NET code behind
Protected Sub GridView1_DataBound1
           (ByVal sender As Object, ByVal e As EventArgs)

For rowIndex As Integer = GridView1.Rows.Count - 2 To 0 Step -1
    Dim gvRow As GridViewRow = GridView1.Rows(rowIndex)
    Dim gvPreviousRow As GridViewRow = GridView1.Rows(rowIndex + 1)
    For cellCount As Integer = 0 To gvRow.Cells.Count - 1
    If gvRow.Cells(cellCount).Text = 
                         gvPreviousRow.Cells(cellCount).Text Then
    If gvPreviousRow.Cells(cellCount).RowSpan < 2 Then
    gvRow.Cells(cellCount).RowSpan = 2
    Else
    gvRow.Cells(cellCount).RowSpan = 
                       gvPreviousRow.Cells(cellCount).RowSpan + 1
    End If
    gvPreviousRow.Cells(cellCount).Visible = False
    End If
    Next
  Next
End Sub


25 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. how to Alternate Color on the first column?

    ReplyDelete
  3. Really a nice Post..
    But the thing is i m not able to understand this blog.. can u help in that.
    can u tell the basic logic which u used in databound

    ReplyDelete
  4. GREAT work!

    Just copyed + pasted and it worked!

    thanks a lot!!!

    ReplyDelete
  5. Could u add a check box to each cell and post the code.Help would be really appreciated!

    ReplyDelete
  6. In my case,i've got same value in the "State" column, and it has been merged. But i do not want it to be merge, cos my "Country" value is different. Any help for this?

    ReplyDelete
  7. Thank you!

    One think I will suggest is to get the gridview from sender, this way, it is generic and can be used to any GridView.

    protected void GridView1_DataBound1(object sender, EventArgs e)
    {
    {
    GridView gv = (GridView)sender;

    if (gv != null)
    {
    // whole code base of yours
    }
    }

    ReplyDelete
  8. Nice idea. I tried it and it worked but really slow. Looked at code for few minutes and realized that there is no need to place the code in Grid DataRowBound. Just place it in a function and call it after Grid.DataBind().

    Cheers.

    ReplyDelete
  9. Similarly how to merge columns in a Gridview when both the cells are equal
    eg:Mango Mango Mango Apple Banana
    o/p: Mango Apple Banana

    ReplyDelete
  10. Similarly how to merge columns in gridview
    when both the cells in a row are equal.

    ReplyDelete
  11. Hi,
    I used the same code.Its works for me.Thanks a lot for that.
    However I have a problem, i want to use different color for the different row, like in the above example for the Country India - I want to have different color for MH and UP. Right now its coming in the same color.
    Please help if i am missing something here.
    Thanks a lot in advance.

    ReplyDelete
  12. Hi,

    How to sort the values in the above gridview.
    I want to apply sorting on all the columns of the above girdview.

    Thanks

    ReplyDelete
  13. hi, though the code is same its not working for me. please suggest some remedy.

    ReplyDelete
  14. @Above : What error you are getting ?

    Have you download the source code and tried ?

    ReplyDelete
  15. Hi Guys,
    Nice Work there. Your Code worked like a charm to me. What I want now as an addition to this is... I want to add a Serial No. Column which corresponds to say Country Column in your Example.
    When Im Using this
    <%# ((GridViewRow)Container).RowIndex + 1%>

    It Generates the Sl no for all Un Merged rows. But I want it for the first Merged Rows... Any help???


    -Srikanth Chaganti

    ReplyDelete
  16. Hi,
    Thanks, your code is really helpful..worked fine.
    Thanks

    ReplyDelete
  17. Hi,

    This is really help ful. But it works only with BoundField only like




    But it doesn't work with TempleteField








    Can anybody help in this...
    Thanks

    ReplyDelete
  18. worked............

    ReplyDelete
  19. Thanks! it is very useful!

    ReplyDelete
  20. Hi, very thanks :)

    ReplyDelete
  21. SUPERB. Works very well.

    ReplyDelete
  22. Hi. i want to merge cells (using columnspan) that contain the same data horizontally. Can anybody help in this?

    ReplyDelete