0

MERGE GRIDVIEW CELLS OR COLUMNS IN ROW ASP.NET

Labels: ,

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 <>
{

if (currentRow.Cells[i].Text == previousRow.Cells[i].Text)
{
if (previousRow.Cells[i].RowSpan <>
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:

 
<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 Columntitle>
</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. 

Comments (0)

Post a Comment

Subscribe to: Post Comments (Atom)