Click here to Skip to main content
15,881,248 members
Articles / Web Development / HTML

Merging DataGrid header columns

Rate me:
Please Sign up or sign in to vote.
3.86/5 (5 votes)
15 Dec 20061 min read 72.2K   1.1K   40  
This article describes the technique to merge the header of a DataGrid by modifying the HTML in a tricky way.
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="TwoHeaderGrd.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
	<HEAD>
		<title>WebForm1</title>
		<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
		<meta name="CODE_LANGUAGE" Content="C#">
		<meta name="vs_defaultClientScript" content="JavaScript">
		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
		<link href="grid.css" type=text/css rel=stylesheet>
	</HEAD>
	<body MS_POSITIONING="GridLayout">
		<form id="Form1" method="post" runat="server">
			<table id="headingtable" style="FONT-WEIGHT: bold; COLOR: #244668" borderColor="#000033"
				height="100%" cellSpacing="0" cellPadding="0" border="0" runat="server">
				<tr>
					<td><asp:datagrid id="grdSearchResult" Runat="server" AllowPaging="True" AutoGenerateColumns="False"
							AllowSorting="True" BackColor="white">
							<ItemStyle Height="30px" VerticalAlign="Top"  CssClass="GrdItemStyle"></ItemStyle>
							<AlternatingItemStyle Height="30px" CssClass="GrdItemStyle"></AlternatingItemStyle>
							<HeaderStyle CssClass="GrdHeaderStyle"></HeaderStyle>
							<Columns>
								<asp:TemplateColumn ItemStyle-BorderColor="#000033" ItemStyle-Width="25Px" ItemStyle-Wrap="True" HeaderStyle-CssClass="GrdExtraHeader">
									<HeaderTemplate>Edit
					</td>
					<td width="350" class="GrdExtraHeader" colspan="3" align="center">Account Information</td>
					<td width="200" class="GrdExtraHeader" colspan="2" align="center">Inventory</td>
					<td width="200" class="GrdExtraHeader" colspan="2" align="center">Payment Details</td>
				</tr>
				<td Align="Center" Height="25px" bgcolor="#244668" class="GrdHeaderStyle" BorderColor="#000033"></td>
				</HeaderTemplate>
				<ItemTemplate>
					<asp:CheckBox id="chkEdit" Runat="server" Width="25"></asp:CheckBox>
				</ItemTemplate>
				</asp:TemplateColumn>
				<asp:TemplateColumn HeaderText="Company" HeaderStyle-CssClass="GrdHeaderStyle" ItemStyle-Width="100Px"
					ItemStyle-Wrap="True" ItemStyle-CssClass="GrdItemStyle">
					<ItemTemplate>
						<asp:Label ID="lblCompanyName"  Width="100px" Runat="server" text='<%# DataBinder.Eval(Container.DataItem,"company_name") %>'>
						</asp:Label>
					</ItemTemplate>
				</asp:TemplateColumn>
				<asp:TemplateColumn HeaderText="WebSite" HeaderStyle-CssClass="GrdHeaderStyle" ItemStyle-Width="100Px"
					ItemStyle-Wrap="True" ItemStyle-CssClass="GrdItemStyle">
					<ItemTemplate>
						<asp:Label ID="lblWebSiteName" Width="150px" Runat="server" text='<%# DataBinder.Eval(Container.DataItem,"website_name") %>'>
						</asp:Label>
					</ItemTemplate>
				</asp:TemplateColumn>
				<asp:TemplateColumn HeaderText="Contact" HeaderStyle-CssClass="GrdHeaderStyle" ItemStyle-Width="100Px"
					ItemStyle-Wrap="True" ItemStyle-CssClass="GrdItemStyle">
					<ItemTemplate>
						<asp:Label ID="lblContactPersonName" Width="100px" Runat="server" text='<%# DataBinder.Eval(Container.DataItem,"contact_person_name") %>'>
						</asp:Label>
					</ItemTemplate>
				</asp:TemplateColumn>
				<asp:TemplateColumn HeaderText="Bill No" HeaderStyle-CssClass="GrdHeaderStyle" ItemStyle-Width="75Px"
					ItemStyle-Wrap="True" ItemStyle-HorizontalAlign="Right" ItemStyle-CssClass="GrdItemStyle">
					<ItemTemplate>
						<asp:Label ID="lblBillno" Width="75px" Runat="server" text='<%# DataBinder.Eval(Container.DataItem,"BillNo") %>'>
						</asp:Label>
					</ItemTemplate>
				</asp:TemplateColumn>
				<asp:TemplateColumn HeaderText="Bill Date" HeaderStyle-CssClass="GrdHeaderStyle" ItemStyle-Width="75Px"
					ItemStyle-Wrap="True" ItemStyle-HorizontalAlign="Right" ItemStyle-CssClass="GrdItemStyle">
					<ItemTemplate>
						<asp:Label ID="lblBillDate" Width="125px" Runat="server" text='<%# DataBinder.Eval(Container.DataItem,"BillDate") %>'>
						</asp:Label>
					</ItemTemplate>
				</asp:TemplateColumn>
				<asp:TemplateColumn HeaderText="Amount" HeaderStyle-CssClass="GrdHeaderStyle" ItemStyle-Width="75Px"
					ItemStyle-Wrap="True" ItemStyle-CssClass="GrdItemStyle">
					<ItemTemplate>
						<asp:Label ID="lblamount" Width="75px" Runat="server" text='<%# DataBinder.Eval(Container.DataItem,"Amount") %>'>
						</asp:Label>
					</ItemTemplate>
				</asp:TemplateColumn>
				<asp:TemplateColumn HeaderText="Payment Type" HeaderStyle-CssClass="GrdHeaderStyle" ItemStyle-CssClass="GrdItemStyle">
					<ItemTemplate>
						<asp:Label ID="lblPayout" Width="75px" Runat="server" text='<%# DataBinder.Eval(Container.DataItem,"payment_type") %>'>
						</asp:Label>
					</ItemTemplate>
				</asp:TemplateColumn>
				</columns> </asp:datagrid></TD></TR>
			</table>
		</form>
	</body>
</HTML>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United States United States
i am a software engineer in a Cybage Software Pvt. ltd. - Pune. and currrently working on a ASP.NET and C#,SQLServer2000, Accipiter AdServer.

Comments and Discussions