Sunday, January 17, 2010

Merge GridView Cells Or Columns in Row ASP.NET C#




Please visit my new Web Site WWW.Codedisplay.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:

Anonymous said...

Brilliant Article of great help!!
Thank You very much!!

-Harshad
India

Anonymous said...

You should refer this code to the people at DevExpress whose Custom GridView named ASPXGridView could use this feature.

Regards,
Harshad
India

Anonymous said...

what about the check box merging to the above gridview cells

Manish Srivastav said...

Its Fantastic... Thanks
Manish Srivastav
INDIA

Anonymous said...

good work

Want to say something?
I WOULD BE DELIGHTED TO HEAR FROM YOU

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Asp.net
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
     
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash