Merge Cell in GridView : The Official Microsoft ASP.NET Forums

Reply

Merge Cell in GridView

Dec 12, 2006 01:39 PM|LINK

Hi all,

I have a Grid View, now I want to merging cell (like ms excel). For example:

I have 3 row display data for one item:

Item 1 | Delivery | 1 | 2 | 3
Item 1 | Produce | 1 | 2 | 3
Item 1 | Inventory | 1 | 2 | 3

Now I want my grid display look like that:

Item 1 | Delivery   | 1 | 2 | 3
          | Produce   | 1 | 2 | 3
          | Inventory | 1 | 2 | 3

Anyone please help me.
Thanks in advance.

Thanks,
Ganesh

Moved by jeff@zina.com on Dec 12, 2006 06:30 PM
Moved by alowe on Dec 12, 2006 06:30 PM

Reply

Re: Merge Cell in GridView

Dec 13, 2006 04:16 AM|LINK

Try this:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<script runat="server">


	protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
	{
		if (e.Row.RowType == DataControlRowType.DataRow)
		{
			if (e.Row.RowIndex == 0)
				e.Row.Cells[0].RowSpan = ((DataTable)GridView1.DataSource).Rows.Count;
			else
				e.Row.Cells.Remove(e.Row.Cells[0]);
		}


	}


	protected void Page_Load(object sender, EventArgs e)
	{
		DataTable dt = new DataTable();
		dt.Columns.Add("this");
		dt.Columns.Add("is");
		dt.Columns.Add("a");
		dt.Columns.Add("test");


		DataRow dr = dt.NewRow();
		dr["this"] = "data";
		dr["is"] = "data";
		dr["a"] = "data";
		dr["test"] = "data";
		dt.Rows.Add(dr);


		dr = dt.NewRow();
		dr["this"] = "data";
		dr["is"] = "data";
		dr["a"] = "data";
		dr["test"] = "data";
		dt.Rows.Add(dr);


		dr = dt.NewRow();
		dr["this"] = "data";
		dr["is"] = "data";
		dr["a"] = "data";
		dr["test"] = "data";
		dt.Rows.Add(dr);


		dr = dt.NewRow();
		dr["this"] = "data";
		dr["is"] = "data";
		dr["a"] = "data";
		dr["test"] = "data";
		dt.Rows.Add(dr);


		dr = dt.NewRow();
		dr["this"] = "data";
		dr["is"] = "data";
		dr["a"] = "data";
		dr["test"] = "data";
		dt.Rows.Add(dr);


		dr = dt.NewRow();
		dr["this"] = "data";
		dr["is"] = "data";
		dr["a"] = "data";
		dr["test"] = "data";
		dt.Rows.Add(dr);


		GridView1.DataSource = dt;
		GridView1.DataBind();
	}
</script>


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
		<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound">
			<Columns>
				<asp:BoundField DataField="This" HeaderText="This" />
				<asp:BoundField DataField="Is" HeaderText="Is" />
				<asp:BoundField DataField="A" HeaderText="A" />
				<asp:BoundField DataField="Test" HeaderText="Test" />
			</Columns>
		</asp:GridView>
    </form>
</body>
</html>

Hope that helps

Aaron

Don't forget to click "Mark as Answer" on the post that helped you. This credits that member, earns you a point and marks your thread as Resolved so everyone will know you have been helped.

Marked as answer by rexlin on Dec 13, 2006 04:26 AM

Reply

Re: Merge Cell in GridView

Dec 13, 2006 09:10 PM|LINK

Hi,

Thansk for your reply, I have one more question, the above code works only for first set of records, what happen if there are multiple set of records something like this:

data1    data1    data1     data1
            data1    data1     data1
             data1    data1     data1
           data1    data1     data1
data2     data2    data2     data2
             data2    data2     data2
data3     data3    data3     data3
data4     data4    data4     data4
             data4    data4     data4
             data4    data4     data4
             data4    data4     data4

Thanks

Thanks,
Ganesh

Reply

m_ganish

Member

65 Points

22 Posts

Re: Merge Cell in GridView

Dec 13, 2006 09:14 PM|LINK

Hi,

Thanks for your reply, I have one more question, the above code works only for first set of records, what happen if there are multiple set of records something like this:

data1    data1    data1     data1
            data1    data1     data1
             data1    data1     data1
           data1    data1     data1
data2     data2    data2     data2
             data2    data2     data2
data3     data3    data3     data3
data4     data4    data4     data4
             data4    data4     data4
             data4    data4     data4
             data4    data4     data4

Thanks

Thanks,
Ganesh

Reply

agolden

Star

7893 Points

1060 Posts

Re: Merge Cell in GridView

Dec 15, 2006 03:06 AM|LINK

Thinking a little more about it, the RowDataBound option only really work if you know the row counts as each row is being processed. Try this instead. Once the data is bound to the GridView, it loops through all the rows to get the counts for the rowspan settings, then loops through again, sets the rowspans, and deletes the appropriate cells.

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<script runat="server">


	protected void GridView1_DataBound(object sender, EventArgs e)
	{
		string text = "";
		int count = 0;
		Hashtable ht = new Hashtable();
		

		// loop through all rows to get row counts
		foreach (GridViewRow gvr in GridView1.Rows)
		{
			if (gvr.RowType == DataControlRowType.DataRow)
			{
				if (gvr.Cells[0].Text == text)
				{
					count++;
				}
				else
				{
					if (count > 0)
					{
						ht.Add(text, count);
					}
					text = gvr.Cells[0].Text;
					count = 1;
				}
			}
		}


		if (count > 1)
		{
			ht.Add(text, count);
		}




		// loop through all rows again to set rowspan
		text = "";
		foreach (GridViewRow gvr in GridView1.Rows)
		{
			if (gvr.RowType == DataControlRowType.DataRow)
			{
				if (gvr.Cells[0].Text == text)
				{
					gvr.Cells.Remove(gvr.Cells[0]);
				}
				else
				{
					text = gvr.Cells[0].Text;
					gvr.Cells[0].RowSpan = Convert.ToInt32(ht[text]);
				}
			}
		}
	}


	protected void Page_Load(object sender, EventArgs e)
	{
		DataTable dt = new DataTable();
		dt.Columns.Add("this");
		dt.Columns.Add("is");
		dt.Columns.Add("a");
		dt.Columns.Add("test");


		DataRow dr = dt.NewRow();
		dr["this"] = "data1";
		dr["is"] = "data1";
		dr["a"] = "data1";
		dr["test"] = "data1";
		dt.Rows.Add(dr);


		dr = dt.NewRow();
		dr["this"] = "data1";
		dr["is"] = "data1";
		dr["a"] = "data1";
		dr["test"] = "data1";
		dt.Rows.Add(dr);


		dr = dt.NewRow();
		dr["this"] = "data1";
		dr["is"] = "data1";
		dr["a"] = "data1";
		dr["test"] = "data1";
		dt.Rows.Add(dr);


		dr = dt.NewRow();
		dr["this"] = "data2";
		dr["is"] = "data2";
		dr["a"] = "data2";
		dr["test"] = "data2";
		dt.Rows.Add(dr);


		dr = dt.NewRow();
		dr["this"] = "data2";
		dr["is"] = "data2";
		dr["a"] = "data2";
		dr["test"] = "data2";
		dt.Rows.Add(dr);


		dr = dt.NewRow();
		dr["this"] = "data3";
		dr["is"] = "data3";
		dr["a"] = "data3";
		dr["test"] = "data3";
		dt.Rows.Add(dr);


		dr = dt.NewRow();
		dr["this"] = "data4";
		dr["is"] = "data4";
		dr["a"] = "data4";
		dr["test"] = "data4";
		dt.Rows.Add(dr);


		dr = dt.NewRow();
		dr["this"] = "data4";
		dr["is"] = "data4";
		dr["a"] = "data4";
		dr["test"] = "data4";
		dt.Rows.Add(dr);


		dr = dt.NewRow();
		dr["this"] = "data4";
		dr["is"] = "data4";
		dr["a"] = "data4";
		dr["test"] = "data4";
		dt.Rows.Add(dr);


		GridView1.DataSource = dt;
		GridView1.DataBind();
	}


</script>


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
		<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnDataBound="GridView1_DataBound">
			<Columns>
				<asp:BoundField DataField="This" HeaderText="This" />
				<asp:BoundField DataField="Is" HeaderText="Is" />
				<asp:BoundField DataField="A" HeaderText="A" />
				<asp:BoundField DataField="Test" HeaderText="Test" />
			</Columns>
		</asp:GridView>
    </form>
</body>
</html>

Don't forget to click "Mark as Answer" on the post that helped you. This credits that member, earns you a point and marks your thread as Resolved so everyone will know you have been helped.

Marked as answer by rexlin on Dec 18, 2006 05:47 AM

Reply

m_ganish

Member

65 Points

22 Posts

Re: Merge Cell in GridView

Dec 15, 2006 09:19 PM|LINK

Thanks a lot!!

I will try this..

Thanks,
Ganesh

Reply

m_ganish

Member

65 Points

22 Posts

Re: Merge Cell in GridView

Dec 18, 2006 05:34 PM|LINK

Hi,

Works fine!!!, i applied alternating colors for each set of data, but it gets applied only to first cell. How to apply alternating colors to each set of data dynamically.

Thanks

Thanks,
Ganesh

Reply

agolden

Star

7893 Points

1060 Posts

Re: Merge Cell in GridView

Dec 19, 2006 01:45 AM|LINK

Try this:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Drawing" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<script runat="server">


	protected void GridView1_DataBound(object sender, EventArgs e)
	{
		string text = "";
		int count = 0;
		Hashtable ht = new Hashtable();
		

		// loop through all rows to get row counts
		foreach (GridViewRow gvr in GridView1.Rows)
		{
			if (gvr.RowType == DataControlRowType.DataRow)
			{
				if (gvr.Cells[0].Text == text)
				{
					count++;
				}
				else
				{
					if (count > 0)
					{
						ht.Add(text, count);
					}
					text = gvr.Cells[0].Text;
					count = 1;
				}
			}
		}


		if (count > 1)
		{
			ht.Add(text, count);
		}




		// loop through all rows again to set rowspan
		text = "";
		Color currentColor = Color.Firebrick;
		foreach (GridViewRow gvr in GridView1.Rows)
		{
			if (gvr.RowType == DataControlRowType.DataRow)
			{
				if (gvr.Cells[0].Text == text)
				{
					gvr.Cells.Remove(gvr.Cells[0]);
				}
				else
				{
					text = gvr.Cells[0].Text;
					count =  Int32.Parse(ht[text].ToString());
					if (count > 1)
						gvr.Cells[0].RowSpan = count;
					

					// Start of new row, alternate color
					currentColor = SwapColor(currentColor);
				}
				// Set background color
				gvr.BackColor = currentColor;
			}
		}
	}


	protected Color SwapColor(Color originalColor)
	{
		return (originalColor == Color.Firebrick) ? Color.DimGray : Color.Firebrick;
	}


	protected void Page_Load(object sender, EventArgs e)
	{
		DataTable dt = new DataTable();
		dt.Columns.Add("this");
		dt.Columns.Add("is");
		dt.Columns.Add("a");
		dt.Columns.Add("test");


		DataRow dr = dt.NewRow();
		dr["this"] = "data1";
		dr["is"] = "data1";
		dr["a"] = "data1";
		dr["test"] = "data1";
		dt.Rows.Add(dr);


		dr = dt.NewRow();
		dr["this"] = "data1";
		dr["is"] = "data1";
		dr["a"] = "data1";
		dr["test"] = "data1";
		dt.Rows.Add(dr);


		dr = dt.NewRow();
		dr["this"] = "data1";
		dr["is"] = "data1";
		dr["a"] = "data1";
		dr["test"] = "data1";
		dt.Rows.Add(dr);


		dr = dt.NewRow();
		dr["this"] = "data2";
		dr["is"] = "data2";
		dr["a"] = "data2";
		dr["test"] = "data2";
		dt.Rows.Add(dr);


		dr = dt.NewRow();
		dr["this"] = "data2";
		dr["is"] = "data2";
		dr["a"] = "data2";
		dr["test"] = "data2";
		dt.Rows.Add(dr);


		dr = dt.NewRow();
		dr["this"] = "data3";
		dr["is"] = "data3";
		dr["a"] = "data3";
		dr["test"] = "data3";
		dt.Rows.Add(dr);


		dr = dt.NewRow();
		dr["this"] = "data4";
		dr["is"] = "data4";
		dr["a"] = "data4";
		dr["test"] = "data4";
		dt.Rows.Add(dr);


		dr = dt.NewRow();
		dr["this"] = "data4";
		dr["is"] = "data4";
		dr["a"] = "data4";
		dr["test"] = "data4";
		dt.Rows.Add(dr);


		dr = dt.NewRow();
		dr["this"] = "data4";
		dr["is"] = "data4";
		dr["a"] = "data4";
		dr["test"] = "data4";
		dt.Rows.Add(dr);


		GridView1.DataSource = dt;
		GridView1.DataBind();
	}


</script>


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
		<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnDataBound="GridView1_DataBound">
			<Columns>
				<asp:BoundField DataField="This" HeaderText="This" />
				<asp:BoundField DataField="Is" HeaderText="Is" />
				<asp:BoundField DataField="A" HeaderText="A" />
				<asp:BoundField DataField="Test" HeaderText="Test" />
			</Columns>
		</asp:GridView>
    </form>
</body>
</html>

Don't forget to click "Mark as Answer" on the post that helped you. This credits that member, earns you a point and marks your thread as Resolved so everyone will know you have been helped.

Reply

m_ganish

Member

65 Points

22 Posts

Re: Merge Cell in GridView

Dec 20, 2006 11:41 PM|LINK

Hi,

Thanks a lot!! for helping.

Now i faced one more issue, for each set of data i need to make the Gridline bold (means dark line) and for other rows i need to make thin line, like this.

data1     data1     data1     data1
--------------------------------------------------- this should be "thin" Gridline
             data1     data1     data1
--------------------------------------------------    this should be "thin" Gridline
             data1     data1     data1
--------------------------------------------------   this should be "thick" Gridline
data2     data2     data2     data2
-------------------------------------------------- this should be "thick" Gridline
data3     data3     data3     data3
------------------------------------------------- this should be "thin" Gridline
             data3     data3     data3
------------------------------------------------ this should be "thin" Gridline
             data3     data3     data3

Thanks in Advance

Thanks,
Ganesh

Reply

m_ganish

Member

65 Points

22 Posts

Re: Merge Cell in GridView

Dec 22, 2006 03:53 PM|LINK

Hi,

Pls ignore my previous post.

Now i faced one more issue, for each set of data i need to make the Gridline bold (means dark line) and for other rows i need to make thin line, like this.

data1     data1     data1     data1
--------------------------------------------------- this should be "thin" Gridline
data1     data1     data1     data1
--------------------------------------------------   this should be "thin" Gridline
data1     data1     data1     data1
--------------------------------------------------   this should be "thick" Gridline (indicates one set of data is complete)
data2     data2     data2     data2
--------------------------------------------------   this should be "thick" Gridline (indicates one set of data is complete)
data3     data3     data3     data3
-------------------------------------------------    this should be "thin" Gridline
data3     data3     data3     data3
------------------------------------------------     this should be "thin" Gridline
data3     data3     data3     data3
--------------------------------------------------   this should be "thick" Gridline (indicates one set of data is complete)
data4     data4     data4     data4
-------------------------------------------------    this should be "thin" Gridline
data4     data4     data4     data4
------------------------------------------------     this should be "thin" Gridline
data4     data4     data4     data4
--------------------------------------------------   this should be "thick" Gridline (indicates one set of data is complete)

Thanks in advance

Thanks,
Ganesh

Merge Cell in GridView RSS

53 replies

m_ganish

Merge Cell in GridView

agolden

Re: Merge Cell in GridView

m_ganish

Re: Merge Cell in GridView

m_ganish

Re: Merge Cell in GridView

agolden

Re: Merge Cell in GridView

m_ganish

Re: Merge Cell in GridView

m_ganish

Re: Merge Cell in GridView

agolden

Re: Merge Cell in GridView

m_ganish

Re: Merge Cell in GridView

m_ganish

Re: Merge Cell in GridView

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft