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.
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
If you like this post than join us or share
25 comments:
This comment has been removed by a blog administrator.
working thanks
hi good
how to Alternate Color on the first column?
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
GREAT work!
Just copyed + pasted and it worked!
thanks a lot!!!
Could u add a check box to each cell and post the code.Help would be really appreciated!
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?
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
}
}
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.
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
Similarly how to merge columns in gridview
when both the cells in a row are equal.
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.
Hi,
How to sort the values in the above gridview.
I want to apply sorting on all the columns of the above girdview.
Thanks
hi, though the code is same its not working for me. please suggest some remedy.
@Above : What error you are getting ?
Have you download the source code and tried ?
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
Hi,
Thanks, your code is really helpful..worked fine.
Thanks
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
worked............
Thanks! it is very useful!
nice
Hi, very thanks :)
SUPERB. Works very well.
Hi. i want to merge cells (using columnspan) that contain the same data horizontally. Can anybody help in this?
Post a Comment