google_ad_client = "pub-7628238925744083";
google_ad_host = "pub-1556223355139109";
google_ad_host_channel="00000+00031+00005";
/* 300x250, created 5/5/09 */
google_ad_slot = "4236597451";
google_ad_width = 300;
google_ad_height = 250;
google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);In most of the cases specially for
reporting purpose we need to merge GridView cells or columns for client
preferred output. In this example i will show you how one can merge
GridView cells or columns in asp.net C#. My special focus is on to
merge cells when both contains same or equal data. So that the GridView
looks like a traditional report. For merging GridView cells here i want
to show you a generic way so that you can use only one common method
for all GridViews in your project where applicable. Let i have 3 tables
named Brand,Category and product. I want to merge all brand &
category if consecutive rows contains same data. Look at my below
sample data:
If i directly bind the above data
then professionally it won't acceptable to client. Look at the
difference what we want to generate:
To produce aforementioned output add a class in your project and named it clsUIUtility. Then copy and paste the below code:
using System;
using System.Web.UI.WebControls;
public class clsUIUtility
{
public clsUIUtility()
{
}
public static void GridView_Row_Merger(GridView gridView)
{
for (int rowIndex = gridView.Rows.Count - 2; rowIndex >= 0; rowIndex--)
{
GridViewRow currentRow = gridView.Rows[rowIndex];
GridViewRow previousRow = gridView.Rows[rowIndex + 1];
for (int i = 0; i < currentRow.Cells.Count; i++)
{
if (currentRow.Cells[i].Text == previousRow.Cells[i].Text)
{
if (previousRow.Cells[i].RowSpan < 2)
currentRow.Cells[i].RowSpan = 2;
else
currentRow.Cells[i].RowSpan = previousRow.Cells[i].RowSpan + 1;
previousRow.Cells[i].Visible = false;
}
}
}
}
}
Now add a page in your project. The HTML Markup code will look like this:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridView_Merge.aspx.cs" Inherits="GridView_Merger" %>
<!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>How to merge GridView cell or Column</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" Width="100%" AutoGenerateColumns="False">
<HeaderStyle BackColor="Red" Font-Bold="true" ForeColor="White" />
<RowStyle BackColor="LightGray" />
<AlternatingRowStyle BackColor="LightGray" />
<Columns>
<asp:BoundField DataField="Brand Name" HeaderText="Brand Name" />
<asp:BoundField DataField="Category Name" HeaderText="Category Name" />
<asp:BoundField DataField="Product Name" HeaderText="Product Name" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
In serverside write the below code:
using System;
public partial class GridView_Merger : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// Here i have used my own db utility class
// Bind data in your own way..its out of scope of this article
GridView1.DataSource = clsDBUtility.GetDataTable("SELECT B.Name [Brand Name],C.Name [Category Name], "+
"P.Name [Product Name] FROM "+
"Brand B, Category C, Product P "+
"WHERE B.ID=P.BrandID AND C.ID=P.CategoryID Order BY 1,2,3");
GridView1.DataBind();
clsUIUtility.GridView_Row_Merger(GridView1);
}
}
}
Hope now you can merge all of
your GridView Cells Or Columns in Row using ASP.NET C# within your
project by writing a single line. Just call the
clsUIUtility.GridView_Row_Merger method and send the GridView that you
want to merge for all applicable Gridviews in your project.
There is a lot of scope to modify the
generic method if GridView rows contain controls like DropDwonList,
CheckBoxList, RadioButtonList etc. in a template column.
