Subscribe
Please visit my new Web Site https://coderstechzone.com
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.
Be smart & happy programming.
5 comments:
Brilliant Article of great help!!
Thank You very much!!
-Harshad
India
You should refer this code to the people at DevExpress whose Custom GridView named ASPXGridView could use this feature.
Regards,
Harshad
India
what about the check box merging to the above gridview cells
Its Fantastic... Thanks
Manish Srivastav
INDIA
good work
I WOULD BE DELIGHTED TO HEAR FROM YOU