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:
view source
print?
01using System;
02using System.Web.UI.WebControls;
03
04public class clsUIUtility
05{
06 public clsUIUtility()
07 {
08 }
09
10 public static void GridView_Row_Merger(GridView gridView)
11 {
12 for (int rowIndex = gridView.Rows.Count - 2; rowIndex >= 0; rowIndex--)
13 {
14 GridViewRow currentRow = gridView.Rows[rowIndex];
15 GridViewRow previousRow = gridView.Rows[rowIndex + 1];
16
17 for (int i = 0; i <>
18 {
19 if (currentRow.Cells[i].Text == previousRow.Cells[i].Text)
20 {
21 if (previousRow.Cells[i].RowSpan <>
22 currentRow.Cells[i].RowSpan = 2;
23 else
24 currentRow.Cells[i].RowSpan = previousRow.Cells[i].RowSpan + 1;
25 previousRow.Cells[i].Visible = false;
26 }
27 }
28 }
29 }
30}
Now add a page in your project. The HTML Markup code will look like this:



01<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridView_Merge.aspx.cs" Inherits="GridView_Merger" %>
02
03http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04
05<html xmlns="http://www.w3.org/1999/xhtml" >
06<head runat="server">
07 <title>How to merge GridView cell or Columntitle>
08head>
09<body>
10 <form id="form1" runat="server">
11 <div>
12 <asp:GridView ID="GridView1" runat="server" Width="100%" AutoGenerateColumns="False">
13 <HeaderStyle BackColor="Red" Font-Bold="true" ForeColor="White" />
14 <RowStyle BackColor="LightGray" />
15 <AlternatingRowStyle BackColor="LightGray" />
16 <Columns>
17 <asp:BoundField DataField="Brand Name" HeaderText="Brand Name" />
18 <asp:BoundField DataField="Category Name" HeaderText="Category Name" />
19 <asp:BoundField DataField="Product Name" HeaderText="Product Name" />
20 Columns>
21 asp:GridView>
22 div>
23 form>
24body>
25html>
In serverside write the below code:
view source
print?
01using System;
02
03public partial class GridView_Merger : System.Web.UI.Page
04{
05 protected void Page_Load(object sender, EventArgs e)
06 {
07 if (!IsPostBack)
08 {
09 // Here i have used my own db utility class
10 // Bind data in your own way..its out of scope of this article
11 GridView1.DataSource = clsDBUtility.GetDataTable("SELECT B.Name [Brand Name],C.Name [Category Name], "+
12 "P.Name [Product Name] FROM "+
13 "Brand B, Category C, Product P "+
14 "WHERE B.ID=P.BrandID AND C.ID=P.CategoryID Order BY 1,2,3");
15 GridView1.DataBind();
16 clsUIUtility.GridView_Row_Merger(GridView1);
17 }
18 }
19}
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.